Animation von Button mit Glanzeffekt bei Mausberührung

Im folgenden Tutorial wollen wir eine Schaltfläche (<button>) mit einem Glanzeffekt animieren, sobald die Maus den Bereich überfährt oder die Schaltfläche den Fokus erhält. Wir arbeiten im Beispiel mit einer Farbe – es könnte aber genauso ein Rennauto in Form einer Grafik sein, die im Hintergrund der Schaltfläche fährt. Wichtig ist die Schritt-für-Schritt Vorgehensweise.

Im ersten Schritt benötigen wir ein wenig HTML mit einer Schaltfläche <button>. Um unseren Effekt auch bei anderen Elementen verwenden zu können, erhält die Schaltfläche die Klasse mit dem Namen „glanzeffekt“:

<h1>animierte Schaltfläche mit Glanzeffekt </h1>

<button class="glanzeffekt">mit Glanzeffekt</button>

Zum Verständnis des Ablaufs rücken wir die Schaltfläche weg vom oberen und linken Rand:

button {
    margin-top: 50px;
    margin-left: 100px;
}

Unsere Schaltfläche bekommt die Eigenschaften:

• goldgelber Hintergrund
• schwarze Schriftfarbe
• Schriftgröße und Zeilenabstand von 2em
• Schriftgewicht „bold“
• einen Radius für den Rahmen
• ein wenig Innenabstand ( 0 1em)

button.glanzeffekt {
    background-color: goldenrod;
    color: black;
    font-size: 2em;
    line-height: 2em;
    font-weight: bold;
    border-radius: 0.5em;
    padding: 0 1em;
}

Jetzt kommt die wichtige Anweisung für unseren Glanzeffekt. Dieser benötigt die Angabe position: relative;. Fehlt diese, führen alle weiteren Schritte schnell zu merkwürdigen Ergebnissen:

.glanzeffekt {
    position: relative;
}

Unsere Schaltfläche hat bereits folgendes Aussehen (bisher ohne Effekt):

Während der Entwicklungsphase gibt es anstelle unseren Glanzeffekts eine italiensche Flagge, die im Hintergrund durchläuft. So ist das Verständnis sehr viel einfacher für die Vorgehensweise aufzubauen.

Diese Flagge erstellen wir über die :after-CSS-Anweisung und erzeugen ein eigenes Element darüber, dem wir auch Inhalt (content: und weitere Eigenschaften wir Hintergrundfarben mitgeben können. Um das Element anzuzeigen erfolgt die Platzierung mit den CSS-Anweisungen top, right, bottom und left. Dieser Weg mag im ersten Augenblick merkwürdig erscheinen, ist aber für den Effekt später wichtig!

Jetzt erst einmal unserer Übergangseffekt als italiensche Flagge:

.glanzeffekt::after {
    content: 'X';
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Das platziert uns ein X mittig über unseren bisherigen Text des Buttons:

Unsere Flagge wird durch linear-gradient erstellt:

.glanzeffekt::after {
    content: 'X';
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: linear-gradient(to right,hsla(120, 100%, 40%, 0.9), 
        hsla(0, 0%, 100%, 0.5) 50%,  hsla(20, 100%, 50%, 0.9));
}

Und nun haben wir unsere Flagge – durch die Farben mit durchsichten Bereich (erzeugt über hsla) sehen wir auch die ursprünglich Schrift:

Unseren Text „X“ benötigen wir nicht mehr – daher einfach den „content:“ leer lassen – er muss aber bestehen bleiben:

.glanzeffekt::after {
    content: '';

Jetzt schieben wir unsere Flagge aus dem sichtbaren Bereich, damit wir diese als Effekt später über die Schaltfläche ziehen können. Dies passiert über negative Werte bei top, bottom und left und Prozentangaben.

.glanzeffekt::after {
    content: '';
    position: absolute;

    top: -20%;
    bottom: -20%;
    right: 110%;
    left: -30%;

    background: linear-gradient(to right,hsla(120, 100%, 40%, 0.9), 
       hsla(0, 0%, 100%, 0.5) 50%,  hsla(20, 100%, 50%, 0.9));
}  

Durch den Wert top: -20%; und bottom: -20%; wird unser Bereich höher als der Button.

Durch die Angabe left: -30%; schiebt es unseren Bereich nach links raus und durch die Angabe right: 110%; sitzt unsere Flagge links neben unserer Schaltfläche und sollte eigentlich gar nicht mehr angezeigt werden (was wir später erledigen):

Jetzt wollen wir unsere Animation aktivieren. Dies läuft über @keyframes, die aktiviert werden, wenn die Maus die Klasse „.glanzeffekt“ berührt. Dabei soll aber nur auf das neue Element (gerade ist es unsere italienische Flagge) betroffen sein. Daher der wilde Aufbau des Selektors mit .glanzeffekt:hover:after. Das gleiche auch, wenn die Schaltfläche den Focus erhält:

.glanzeffekt:hover:after, .glanzeffekt:focus:after {
    animation: glanzeffekt_animate 1s forwards;
}

Uns unsere Animation verändert alleine die Position über left: und right:

@keyframes glanzeffekt_animate {
    100% {
        left: 110%;
        right: -40%;
    }
}

Jetzt werden wir unsere Flagge über die Fläche sich bewegen sehen, wenn wir die Schaltfläche mit der Maus berühren.

Wir wollen aber die Flagge auserhalb der Schaltfläche nicht sichtbar haben. Daher muss diese „ausblendet“ werden über overflow: hidden;:

.glanzeffekt {
    position: relative;
    overflow: hidden;
} 

Und jetzt nur noch den Glanzeffekt ohne Flagge – wir setzen die Farben Grün und Rot auf komplett durchsichtig – anstelle des bisherigen letzten Wertes 0.9 bei der hsla-Angabe setzen wir diesen auf 0:

background: linear-gradient(
   to right,
   hsla(120, 100%, 40%, 0), 
   hsla(0, 0%, 100%, 0.5) 50%, 
   hsla(20, 100%, 50%, 0)
);

Und Fertig ist unser Glanzeffekt!

Hier der komplette Code:

<h1>animierte Schaltfläche mit Glanzeffekt</h1>

<button class="glanzeffekt">mit Glanzeffekt</button>

Und der komplette CSS-Code:

button.glanzeffekt {
    background-color: goldenrod;
    color: black;
    font-size: 2em;
    line-height: 2em;
    font-weight: bold;
    border-radius: 0.5em;
    padding: 0 1em;
}

.glanzeffekt {
    position: relative;
    overflow: hidden;
}        

.glanzeffekt::after {
    content: '';
    position: absolute;

    top: -20%;
    bottom: -20%;
    right: 110%;
    left: -30%;

    background: linear-gradient(to right,hsla(120, 100%, 40%, 0.9), hsla(0, 0%, 100%, 0.5) 50%,  hsla(20, 100%, 50%, 0.9));
}               

.glanzeffekt:hover:after, .glanzeffekt:focus:after {
    animation: glanzeffekt_animate 1s forwards;
}

@keyframes glanzeffekt_animate {
    100% {
        left: 110%;
        right: -40%;
    }
}  

Viel Spaß beim Anwenden – es funktioniert auch bei anderen Elemente als nur bei Schaltflächen.