Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » CSS lernen » Button mit Glanzeffekt

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.

animierter Button mit Glanzeffekt
animierter Button mit Glanzeffekt

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):

Design unserer Schaltfläche bisher
Design unserer Schaltfläche bisher

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:

weitere Element über den Button gelegt
weitere Element über den Button gelegt

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:

Farbbereich über Inhalt gelegt
Farbbereich über Inhalt gelegt

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):

Flagge links neben Button
Flagge links neben Button

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.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe