Tutorial: Hover-Effekte für CSS-Buttons (1/2)

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>

.ofa_button {background-color: #163EFF; color: #FFFFFF; border: none; padding: 10px; text-align: center; font-size: 16px;}

Das ist ein cooler 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:

.ofa_button1 {background-color: #163EFF; color: #FFFFFF; border: none; padding: 10px; text-align: center; font-size: 16px; transition: background-color 0.4s;} .ofa_button1:hover {background-color: #FF0000;}

Das ist ein Farbwechsel-Button

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 */
    }

.ofa_button2 {background-color: #163EFF; color: #FFFFFF; border: none; padding: 10px; text-align: center; font-size: 16px; transition: all 0.4s;} .ofa_button2:hover {background-color: #FFFFFF; color: #000000; border: 5px solid #FFD858;}

Hoppla, das sieht komisch aus…

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 */
    }

.ofa_button21 {background-color: #163EFF; color: #FFFFFF; padding: 10px; text-align: center; font-size: 16px; border: 5px solid #FFFFFFFF; transition: all 0.4s;} .ofa_button21:hover {background-color: #FFFFFF; color: #000000; border: 5px solid #FFD858;}

Das ist ein auffälliger Button

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.

Hover-Effekt: Button ausblenden

So sieht das CSS für den Button aus:

.ofa_button
    {background-color: #163EFF; color: #FFFFFF; border: none; padding: 10px; text-align: center; font-size: 16px;
    transition: opacity 0.3s;} /* Animierte Änderung der Eigenschaft Deckkraft */

.ofa_button:hover
    {
    opacity: 0.7; /* Deckkraft: 0 = transparent, 1 = opak */
    }

.ofa_button3 {background-color: #163EFF; color: #FFFFFF; border: none; padding: 10px; text-align: center; font-size: 16px; transition: opacity 0.3s;} .ofa_button3:hover {opacity: 0.7;}

Das ist ein ausblendender Button

Tipp: Dieser Effekt kommt besonders gut auf einem hellen, einfarbigen Hintergrund zur Geltung.

Hover-Effekt: Button aufleuchten

Der Effekt lebt davon, dass der ursprüngliche Button dunkler ist als die Hover-Variante. Sie können dies durch die Farbwahl beeinflussen, oder wie im folgenden Beispiel, durch das Anwenden eines CSS-Filters.

.ofa_button
    {background-color: #163EFF; color: #FFFFFF; border: none; padding: 10px; text-align: center; font-size: 16px;
    filter:brightness(0.5); /* Reduzierung der Helligkeit um 50 % */
    transition: filter 0.3s;} /* Animierte Änderung der angewendeten Filter */

.ofa_button:hover
    {
    filter:brightness(1); /* Helligkeit auf 100 % */
    }

.ofa_button4 {background-color: #163EFF; color: #FFFFFF; border: none; padding: 10px; text-align: center; font-size: 16px; filter:brightness(0.5); transition: filter 0.3s;} .ofa_button4:hover {filter:brightness(1);}

Das ist ein leuchtender Button

Wissenswertes: Wir wenden hier einen sogenannten „CSS-Filter“ auf den Button an. Mit diesen Filtern lassen sich noch weitere Effekte zaubern – mehr dazu gibt es in einem späteren Tutorial.

Hover-Effekt: Button verwischen

Und weil wir schon einmal bei Filtern sind, ein weiteres Beispiel:

.ofa_button
    {background-color: #163EFF; color: #FFFFFF; border: none; padding: 10px; text-align: center; font-size: 16px;
    filter:blur(0.5px); /* Leichtes Weichzeichnen des Buttons */
    transition: filter 0.4s;} /* Animierte Änderung der angewendeten Filter */

.ofa_button:hover
    {
    filter:blur(0px); /* Entfernen der Weichzeichnung */
    }

.ofa_button5 {background-color: #163EFF; color: #FFFFFF; border: none; padding: 10px; text-align: center; font-size: 16px; filter:blur(0.5px); transition: filter 0.4s;} .ofa_button5:hover {filter:blur(0px);}

Das ist ein weichgezeichneter Button

Wissenswertes: Je größer der Wert des Filters „blur“ (in unserem Fall also 0.5px), desto verschwommener wirkt der Button. Achten Sie beim Experimentieren mit verschiedenen Werten auf eine gute Lesbarkeit der Beschriftung.

Hover-Effekt: Button hervorheben

So sieht das CSS für den Button aus:

.ofa_button
    {background-color: #163EFF; color: #FFFFFF; padding: 10px; text-align: center; font-size: 16px;
    height: 40px; /* Höhe des Buttons */
    width: 250px; /* Breite des Buttons */
    margin: 5px; /* Außenabstand als Platzhalter für die Animation */ 
    transition: all 0.4s;} /* Alle Eigenschaften werden animiert */

.ofa_button:hover
    {
    margin: 0px; /* Der Außenabstand verschwindet */
    font-size: 18px; /* Neue Schriftgröße */
    height: 50px; /* Neue Höhe des Buttons */
    width: 260px; /* Neue Breite des Buttons */
    }

.ofa_button6 {background-color: #163EFF; color: #FFFFFF; border: none; padding: 10px; text-align: center; font-size: 16px; height: 40px; width: 250px; margin: 5px; transition: all 0.4s;} .ofa_button6:hover {margin: 0px; font-size: 18px; height:50px; width:260px;}

Dieser Button wächst…

Wissenswertes: Um ein Verschieben der nachfolgenden Inhalte zu vermeiden, darf die Größenzunahme des Buttons in Höhe und Breite jeweils den doppelten Außenabstand nicht überschreiten.

Das war’s…

Ich wünsche Ihnen viel Spaß beim Ausprobieren! 🙂

Und hier geht es weiter mit dem zweiten Teil…

Autor: Tobias Eichner | Datum der Veröffentlichung: Dezember 2017 | Letzte Aktualisierung: Januar 2026
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!