<button>Klick mich</button>

Klick mich

<button style="padding: 20px;">Klick mich</button>

Klick mich

<button style="width: 150px; height: 50px;">Klick mich</button>

Klick mich

<button style="width: 300px; height: 150px;">Klick mich</button>

Klick mich

<button id="myButton" onclick="resizeButton()">Klick mich</button>
<script>
function resizeButton() {
  document.getElementById("myButton").style.width = "200px";
  document.getElementById("myButton").style.height = "70px";
}
</script>

Klick mich

Button

<button style="transform: scale(1.5); margin-left:1%;">Klick mich</button>

Klick mich

<style>
#Taste {
width: 100px;
height: 30px;
background-color: lightcoral;
color: white;
}

/* Media Query für kleine Bildschirme bis max. 600px Breite */
@media (max-width: 600px) {
/* Wenn die Bildschirmbreite 600px oder weniger beträgt, wird dieser Stil angewendet */
#Taste {
width: 80%; /* 80% der verfügbaren Elternbreite */
height: 50px;
/* (Optional: Farbe ändert sich (wenn der Bildschirm eine kleinere Breit als 600px hat) zur Bestätigung des Media Queries) */
background-color: royalblue;
}
}
</style>

<button id="Taste">Klick mich</button>

Klick mich

<button style="padding: 1em 2em; font-size: 1.5rem;">Klick mich</button>

Klick mich

<button style="padding: 1em 1em; font-size: 1.5rem;">Klick mich</button>

In diesem Beispiel werden der Innenabstand und die Schriftgröße des Buttons mithilfe der Einheiten em und rem festgelegt.

Ein Innenabstand von 1em entspricht der aktuellen Schriftgröße des Buttons, während 2em den doppelten Innenabstand bedeutet.

Die Einheit rem bezieht sich auf die Schriftgröße des Wurzelelements, die üblicherweise der Standardschriftgröße des HTML-Dokuments entspricht.

Die Verwendung relativer Einheiten wie em und rem macht Ihre Schaltflächen anpassungsfähiger und einfacher zu pflegen, insbesondere bei responsiven Designs, bei denen sich die Schriftgröße je nach Bildschirmgröße oder Benutzereinstellungen ändern kann.