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

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

Programmierung
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…

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

Und hier geht es weiter mit dem zweiten Teil… (Link öffnet in einem neuen Tab)

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

Werbung

Ähnliche Artikel