Wie bau ich einen Druckbutton in die Webseite ein? (HTML und CSS Anleitung)

Hin und wieder möchte man ja seinen Webseitenbesuchern ja die Möglichkeit geben, den Inhalt der Seite auszudrucken. So könnte man die Produktbeschreibung, Dokumentation oä zum drucken bereitstellen. Wenn man aber einfach im Browser auf Drucken klickt, dann kann das sehr schlimm aussehen. Aus diesem Grund ist es wichtig dass man als Webseitenbetreiber auch darauf schaut, dass die Webseite gut ausdruckbar ist. Man kann dafür auch gezielt einen Druckbutton vorbereiten und verlinken. Mit ein wenig CSS Hexerei kann man dann auch dafür sorgen, dass die ganze Seite schön aussieht und nicht nur wie von einem 2 Jähriges Kind gezeichnet 🙂

Video

HTML

<div class="container">
      <h2>Print</h2>
      <button class="drucken" type="button">
        <span class="material-symbols-outlined"> print </span>
      </button>
      <div class="box">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore
        similique perspiciatis quaerat aliquam quos doloremque aspernatur
        asperiores? Iste veniam obcaecati, nam earum quas distinctio suscipit
        accusamus. Adipisci, molestiae. Sunt, consequatur!
      </div>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #d4a373;
}
h2 {
  text-align: center;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.drucken {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 300px;
  text-align: center;
  padding: 10px;
  margin: 30px;
  border: 1px #000 solid;
}

@media print {
  body {
    background: #d4a373;
  }
}

Javascript

const buttonDrucken = document.querySelector(".drucken");
      buttonDrucken.addEventListener("click", () => window.print());