Seite Drucken

html







-Einfacher Druckbutton für deine Webseite-




Mit diesem Code kannst Du Deine Webseite den Besuchern zum Drucken anbieten.
html
<input type="button" value="Seite drucken" onClick="window.print()"/>
Tipp: Füge den Code an der Stelle ein, wo der Button erscheinen soll –
z. B. am Ende Deiner Seite oder bei einem bestimmten Inhalt.

-Druckbutton mit CSS-Stil-




Kopiere den CSS-Code.
Du kannst die Farben anschließend an Dein Design anpassen.
css
.print-button {
background-color: #b0acb0;
color: #1a0c1a;
border: 1px solid #d4af37;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.print-button:hover {
background-color: #7d6d7d;
color: #eeedee;
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

Funktionen der CSS-Eigenschaften

CSS-Eigenschaft Funktion
background-color: #b0acb0; Legt die Hintergrundfarbe des Buttons fest.
color: #1a0c1a; Bestimmt die Schriftfarbe (dunkles Violett).
border: 1px solid #d4af37; Fügt einen goldfarbenen Rahmen hinzu.
padding: 10px 20px; Gibt dem Button innen mehr Platz: links/rechts 20px, oben/unten 10px.
font-size: 16px; Setzt die Schriftgröße.
font-weight: bold; Macht den Text fett für bessere Sichtbarkeit.
border-radius: 5px; Rundet die Ecken des Buttons ab.
box-shadow: Fügt einen weichen Schatten hinzu, damit der Button sich leicht abhebt.
transition: all 0.3s ease; Sorgt für eine sanfte Bewegung, wenn man mit der Maus darüberfährt.
transform: scale(1.03);
 Vergrößert den Button beim Darüberfahren leicht, wirkt interaktiv (Hover-Effekt).


Kopiere den Code einfach an die Stelle, an der der Button erscheinen soll.
html
<input type="button" class="print-button" value="Seite drucken" onClick="window.print()"/>
Erklärung der einzelnen Stilregeln:
Bereich Bedeutung
input type="button" Erstellt einen klickbaren Button.
onClick="window.print()" Öffnet beim Klick das Druckfenster des Browsers.
.print-button { ... } Die CSS-Klasse sorgt für das schöne Aussehen:
Farben, Rundungen, Schrift usw.
value="Seite drucken" Hier steht der Text, der auf dem Button angezeigt wird und kann nach Wunsch geändert werden.
(z. B. „Druck starten“, „Jetzt drucken“, „PDF erstellen“ usw.).


-Drucker-Grafik zum Klicken-

Mit diesem Bild kannst Du per Klick den Druck starten:



Einfach an die Stelle kopieren, an der der Button erscheinen soll.
html
<button onclick="window.print()" class="print-button" aria-label="Seite drucken">
<img src="Bilder/icon00.png" alt="Drucker-Icon"
width="32" height="32" />
</button>

Passe den Pfad im src-Attribut an:
html
<img src="Bilder/icon00.png" ... />
Hinweis: Achte darauf, dass das Bild icon00.png im Ordner Bilder liegt.
Falls nicht, ändere den Pfad im src-Attribut so, dass er zum Speicherort passt:

Füge diesen Teil in Deine externe CSS-Datei ein (z. B. style.css):
css
.print-button {
background: none;
border: none;
padding: 5px;
cursor: pointer;
transition: transform 0.2s ease;
}

.print-button:hover {
transform: scale(1.1);
Funktionen der CSS-Eigenschaften:
CSS-Eigenschaft Funktion
background: none; Kein Hintergrund, das Bild steht „frei“.
border: none; Kein Rahmen um den Button.
padding: 5px; Kleiner Abstand rund ums Bild.
cursor: pointer; Beim Darüberfahren wird der Mauszeiger zur Hand.
transition: ... Die Animation passiert sanft (nicht ruckartig).
transform: scale(1.1); Beim Darüberfahren wird das Bild etwas vergrößert (Hover-Effekt).

Das war's auch schon von mir. 😊
Verfasst am 07.Juli 2007, aktualisiert am 18.Juli 2025