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

von | Mai 17, 2023 | Allgemein | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML - Javascript

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

1
2
3
4
5
6
7
8
9
10
11
12
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
* {
  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

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

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert