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

So hauchen Sie Ihren CSS-Buttons Leben ein...

Werbung

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

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

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

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

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…

… aber bald geht es weiter mit dem zweiten Teil. Ich wünsche Ihnen viel Spaß beim Ausprobieren! 🙂


Stand der Informationen: Dezember 2017
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!

Werbung