In einem früheren Beitrag haben wir uns angesehen, wie einfach man mit ein wenig CSS und HTML coole Buttons erstellt.
Aber es ist noch viel mehr möglich. Wie wäre es, wenn Sie Ihre CSS-Buttons zum Leben erwecken und mit professionellen Effekten versehen könnten? Ja, mit ein paar Tricks sind sogar Animationen kein Problem.
Als Ausgangspunkt verwenden wir unseren folgenden, allseits bekannten Button:
<style>
.ofa_button
{
background-color: #163EFF; /* Hintergrundfarbe */
color: #FFFFFF; /* Textfarbe */
border: none; /* Rahmen */
padding: 10px; /* Innenabstand */
text-align: center; /* Ausrichtung Text */
font-size: 16px; /* Schriftgröße */
}
</style>
<button class="ofa_button">Das ist ein cooler Button</button>Falls Sie mit dem obigen Quelltext noch nichts anfangen können, lesen Sie bitte zuerst das Tutorial über die Grundlagen von CSS-Buttons.
Hover-Effekt: Hintergrundfarbe ändern
Mit dem Ändern der Hintergrundfarbe des Buttons erzeugen Sie auf einfache Weise Aufmerksamkeit und rufen ganz laut: „Klick mich!“.
Damit der Effekt lebendiger wirkt, fügen wir eine animierte Überblendung hinzu, die einen weichen Übergang zwischen den Farben schafft.
.ofa_button
{
background-color: #163EFF; /* Hintergrundfarbe */
color: #FFFFFF; /* Textfarbe */
border: none; /* Rahmen */
padding: 10px; /* Innenabstand */
text-align: center; /* Ausrichtung Text */
font-size: 16px; /* Schriftgröße */
transition: background-color 0.4s; /* Animierte Änderung der Eigenschaft background-color */
}
.ofa_button:hover /* Eigenschaften beim Überfahren mit der Maus */
{
background-color: #FF0000; /* Neue Farbe */
}
Und so sieht es dann aus:
Hinweis: Achten Sie bei der Farbauswahl darauf, dass die Beschriftung des Buttons lesbar bleibt.
Der Hover-Selektor
Der Selektor „:hover“ legt die Eigenschaften des Buttons beim Überfahren mit der Maus fest. Mit diesem Wissen können wir auch alle anderen Eigenschaften anpassen, beispielsweise Rahmen und Textfarbe.
Die Eigenschaft „transition“
Die Eigenschaft „transition“ ist ein mächtiges Werkzeug, um Wertänderungen für CSS-Eigenschaften zu animieren. Sie wird in unseren Beispielen häufiger auftauchen, deshalb werfen wir an dieser Stelle einen ausführlicheren Blick darauf.
Aufbau der Eigenschaft „transition“:
transition: <eigenschaft> <dauer> <art der animation> <verzögerung>
- <eigenschaft>: Kommagetrennte Liste der zu animierenden Eigenschaften (oder „all“ für alle).
- <dauer>: Dauer der Animation in einer gültigen Zeiteinheit, z.B. „s“ für Sekunden.
- <art der animation>: Geschwindigkeitskurve der Animation (Standard ist „ease“).
Für die Option <art der animation> gibt es die folgenden Möglichkeiten:
- ease: Langsamer Start, Beschleunigung, langsames Ende.
- linear: Gleichbleibende Geschwindigkeit von Anfang bis Ende.
- ease-in: Langsamer Start, dann gleichbleibende Geschwindigkeit.
- ease-out: Gleichbleibende Geschwindigkeit mit langsamen Ende.
- ease-in-out: Langsamer Start und Ende, dazwischen gleichbleibender Verlauf.
- cubic-bezier(n,n,n,n): beschreibt einen individuellen Verlauf; n = 0 bis 1.
Sehen wir uns ein weiteres Beispiel an:
.ofa_button
{background-color: #163EFF; color: #FFFFFF; border: none; padding: 10px; text-align: center; font-size: 16px;
transition: all 0.4s;} /* Alle Eigenschaften werden animiert */
.ofa_button:hover
{
background-color: #FFFFFF; /* Hintergrundfarbe */
color: #000000; /* Textfarbe */
border: 5px solid #FFD858; /* Rahmen */
}
Aber Vorsicht: Sie haben bestimmt bemerkt, dass sich durch den zusätzlichen Rahmen die Größe des Buttons ändert und nachfolgender Content entsprechend verschiebt.
Das wirkt nicht gerade professionell, kann aber leicht behoben werden: Fügen Sie dem Button einen transparenten Rahmen hinzu und passen im „:hover“-Selektor dann die Farbe des Rahmens an.
.ofa_button
{background-color: #163EFF; color: #FFFFFF; padding: 10px; text-align: center; font-size: 16px;
border: 5px solid #FFFFFFFF; /* Ein transparenter Rahmen */
transition: all 0.4s;} /* Alle Eigenschaften werden animiert */
.ofa_button:hover
{
background-color: #FFFFFF; /* Hintergrundfarbe */
color: #000000; /* Textfarbe */
border: 5px solid #FFD858; /* Neue Farbe für den Rahmen */
}
Einschub: Strukturierung von HTML und CSS
Im vorangegangenen Beispiel habe ich einige der Style-Anweisungen für den Button in einer langen Zeile zusammengezogen, um Platz zu sparen.
Theoretisch könnte man sogar alle Weißzeichen (z.B. Leerzeichen und Zeilenumbrüche) entfernen. Im Fachjargon nennt sich diese Technik „Minification“.
Ich empfehle Ihnen aber, eine gewisse Struktur beizubehalten. Das macht den Quellcode leichter lesbar und Änderungen gehen schneller von der Hand (die Fehlersuche übrigens auch).
Und ob die Ladezeit einer Website durch diese wenigen eingesparten Bytes wirklich signifikant verkürzt wird, halte ich in Zeiten von HTTP/2 für ein Gerücht – jedenfalls dürfte der Performance-Gewinn für den Nutzer kaum spürbar sein.
