CSS - Buttons: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, ambitionierte Web-Entwickler! Heute tauchen wir ein in die wundervolle Welt der CSS-Buttons. Bis zum Ende dieses Tutorials wirst du Buttons erstellen, die nicht nur gut funktionieren, sondern auch toll aussehen. Also, los geht's!

CSS - Buttons

CSS Buttons - Grundlegendes Beispiel

Lassen Sie mit einem einfachen Button beginnen. Hier ist das notwendige HTML und CSS:

<button class="basic-button">Klicke mich!</button>

.basic-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

Das erstellt einen grünen Button mit weißem Text. Die Eigenschaft padding gibt ihm eine Größe, während cursor: pointer die Mauszeiger in eine Hand verwandelt, wenn man über den Button:hover.

CSS Buttons Farben

Buttons können jede Farbe haben, die du möchtest! Hier ist, wie man Buttons in verschiedenen Farben erstellt:

<button class="blue-button">Blau</button>
<button class="red-button">Rot</button>
<button class="yellow-button">Gelb</button>

.blue-button {background-color: #008CBA;}
.red-button {background-color: #f44336;}
.yellow-button {
background-color: #ffeb3b;
color: black;
}

Beachte, wie wir für den gelben Button schwarzen Text verwendet haben, um die Lesbarkeit zu gewährleisten.

CSS Buttons Größen

Du kannst leicht Buttons in verschiedenen Größen erstellen, indem du die Eigenschaften font-size und padding anpasst:

<button class="small-button">Klein</button>
<button class="medium-button">Mittel</button>
<button class="large-button">Groß</button>

.small-button {
font-size: 12px;
padding: 10px 24px;
}
.medium-button {
font-size: 16px;
padding: 12px 28px;
}
.large-button {
font-size: 20px;
padding: 14px 40px;
}

CSS Buttons Padding

Padding ist entscheidend für die Button-Größe. Lassen Sie experimentieren mit verschiedenen Padding-Werten:

<button class="padding-button1">Button 1</button>
<button class="padding-button2">Button 2</button>

.padding-button1 {
padding: 10px 20px;
}
.padding-button2 {
padding: 15px 40px;
}

Denke daran, der erste Wert ist für die oberen und unteren Padding, der zweite für die linken und rechten.

CSS Abgerundete Buttons

Möchtest du die scharfen Ecken abrunden? Verwende border-radius:

<button class="rounded-button">Abgerundet</button>

.rounded-button {
border-radius: 12px;
}

Experimentiere mit verschiedenen Werten, um die gewünschte Rundheit zu erreichen!

CSS Farbige Button Borders

Fügen wir unseren Buttons einige Ränder hinzu:

<button class="border-button">Gerandet</button>

.border-button {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}

Das erstellt einen weißen Button mit einem grünen Rand und schwarzem Text.

CSS Hoverable Buttons

Interaktivität ist der Schlüssel! Machen wir unsere Buttons bei Hover veränderbar:

<button class="hover-button">Hover Mich</button>

.hover-button {
background-color: white;
color: black;
border: 2px solid #008CBA;
transition: 0.3s;
}

.hover-button:hover {
background-color: #008CBA;
color: white;
}

Die Eigenschaft transition stellt sicher, dass die Farbänderung fließend ist.

CSS Schatten Buttons

Füge deinen Buttons mit Schatten Tiefe hinzu:

<button class="shadow-button">Schatten</button>

.shadow-button {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Die Eigenschaft box-shadow fügt einen Schatteneffekt zum Button hinzu.

CSS Deaktivierte Buttons

Manchmal musst du Buttons deaktivieren:

<button class="disabled-button" disabled>Deaktiviert</button>

.disabled-button {
opacity: 0.6;
cursor: not-allowed;
}

Die Eigenschaft opacity macht den Button ausgebleicht, während cursor: not-allowed den Cursor ändert, um anzuzeigen, dass der Button nicht geklickt werden kann.

CSS Buttons Breite

Du kannst die Button-Breite mit Prozenten oder festen Werten steuern:

<button class="full-width">Volle Breite</button>
<button class="half-width">Halbe Breite</button>

.full-width {
width: 100%;
}
.half-width {
width: 50%;
}

CSS Buttons Gruppen

Gruppiere deine Buttons für ein kohärentes Aussehen:

<div class="button-group">
<button>Links</button>
<button>Mitte</button>
<button>Rechts</button>
</div>

.button-group button {
float: left;
}
.button-group button:not(:last-child) {
border-right: none;
}

Das erstellt eine horizontal gruppierte Reihe von Buttons.

CSS Rand Buttons Gruppen

Füge deinen Button-Gruppen Ränder hinzu:

<div class="border-button-group">
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>

.border-button-group button {
border: 1px solid green;
float: left;
}
.border-button-group button:not(:last-child) {
border-right: none;
}

CSS Vertikale Buttons Gruppen

Du kannst auch vertikale Button-Gruppen erstellen:

<div class="vertical-button-group">
<button>Oben</button>
<button>Mitte</button>
<button>Unten</button>
</div>

.vertical-button-group button {
display: block;
width: 100%;
}
.vertical-button-group button:not(:last-child) {
border-bottom: none;
}

CSS Buttons auf Bild

Platziere Buttons auf Bildern für einen auffälligen Effekt:

<div class="container">
<img src="image.jpg" alt="Bild">
<button class="btn">Button</button>
</div>

.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

CSS Animierte Buttons

Fügen wir unseren Buttons einige Animation hinzu:

<button class="animated-button">Animiert</button>

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.animated-button {
animation: pulse 2s infinite;
}

Das erstellt einen pulsierenden Effekt auf dem Button.

CSS Button Druckeffekt

Simuliere einen Buttondruck mit CSS:

<button class="press-button">Drücke mich</button>

.press-button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}

Der Button scheint nach dem Klick nach unten zu bewegen.

CSS Button Einblendeffekt

Erstelle einen Einblendeffekt für deine Buttons:

<button class="fade-in-button">Einblenden</button>

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.fade-in-button {
animation: fadeIn 2s;
}

Dieser Button wird einblenden, wenn die Seite lädt.

CSS Button Welleneffekt

Schließlich erstellen wir einen Welleneffekt:

<button class="ripple">Welle</button>

.ripple {
position: relative;
overflow: hidden;
}

.ripple:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}

.ripple:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}

Das erstellt einen Welleneffekt, wenn der Button geklickt wird.

Und das ist es! Du bist nun mit dem Wissen ausgestattet, um eine Vielzahl von CSS-Buttons zu erstellen. Denke daran, Übung macht den Meister, also habe keine Angst, mit diesen Stilen zu experimentieren und deine eigenen einzigartigen Buttons zu erstellen. Viel Spaß beim Coden!

Credits: Image by storyset