Button mit Jalousie-Effekt
Das ist der CSS-Code für den Button:
.ofa_button {
background-color: #163EFF;
color: #FFFFFF;
padding: 10px;
width: 300px;
text-align: center;
font-size: 16px;
border: 1px solid #FFFFFF;
overflow: hidden;
position: relative;}
.ofa_button::after {
content: "";
background: #ffffff;
display: block;
position: absolute;
padding: 100%;
margin-left: -10px;
margin-top: -100%;
opacity: 0.4;
transition: all 1.5s;
transition-timing-function: linear;}
.ofa_button:hover::after {
margin: 100% 100% 100% -10px;}
Und so funktioniert es:
Auch hier kommt wieder das Pseudo-Element ::after zum Einsatz, welches wir durch geschicktes Verschieben beim Überfahren mit der Maus nach unten „aus dem Button heraus“ bewegen und später wieder aufsteigen lassen. So entsteht eine effektvolle Animation.
Tipp: Experimentieren Sie ein wenig mit der „Farbe“ und dem Transparenzgrad der Jalousie! Mit der folgenden Änderung verleihen Sie der Animation mehr Tiefe:
.ofa_button:hover::after {
background: #FFD858;
opacity: 1;
margin: 100% 100% 100% -10px;}
Durch das Hinzufügen einer Hintergrundfarbe, die während der Animation aufblendet, entsteht ein zusätzlicher interessanter Effekt.
Dreidimensionaler Button
Das ist der CSS-Code für den Button:
.ofa_button {
background-color: #163EFF;
color: #FFFFFF;
padding: 10px;
width: 300px;
text-align: center;
font-size: 16px;
border: 1px solid #FFFFFF;
overflow: hidden;
position: relative;
box-shadow: 0 4px 8px 0 #00000070, 0 6px 20px 0 #00000060;
transition: all 0.5s;}
.ofa_button:hover {
background-color: #2A7FFF;}
.ofa_button:active {
background-color: #2A7FFF;
box-shadow: none;
transform: translateY(4px);}
Und so funktioniert es:
Im Grunde ist der Effekt simpel, aber das Ergebnis sieht dafür umso genialer aus!
Im ersten Schritt legen wir das Aussehen des Buttons fest und setzen einen (zugegeben, etwas komplizierten) Schatten.
Der Selektor :active tritt in Kraft, sobald der Button geklickt wird (also „aktiv“ ist). Er verschiebt den gesamten Button um vier Pixel nach unten (Y-Achse = vertikal). Voila!
Tipp: Achten Sie beim Experimentieren mit eigenen Einstellungen darauf, dass die Tiefe des Schattens exakt dem Hub der späteren Drück-Bewegung des Buttons nach unten entspricht.
Animation bei verlinkten Buttons:
Soll der Button eine URL im Webbrowser öffnen, dann besteht das Risiko, dass der Benutzer unter Umständen die Klick-Animation gar nicht sieht, sondern sofort auf die neue Adresse weitergeleitet wird.
Eine mögliche Lösung des Problems besteht darin, die Animation als Hover-Effekt festzulegen und dafür auf den Selektor :active zu verzichten:
.ofa_button:hover {
background-color: #2A7FFF;
box-shadow: none;
transform: translateY(4px);}
Viel Spaß beim Ausprobieren!
Autor: Tobias Eichner | Datum der Veröffentlichung: Januar 2018
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!
