Beispielcode zur Implementierung einer Schaltfläche mit Hintergrundverlauf mithilfe von Div+CSS3

<div Klasse="btn_demo">
	<div class="text">Erfahrung</div>
	<div Klasse="Pfeil">»</div>
</div>

@keyframes Pfeil_verschieben {
   /* Startzustand */
    0% {
        links: 130px;
    }
	/* Endstatus */
    100 % {
        links: 140px;
    }
}
@keyframes Farbverschiebung {
    /* Startzustand */
    0% {
        Hintergrundposition: 0 % 0 %; /* horizontale Position vertikale Position */
    }
    50 % {
        Hintergrundposition: 50 % 0 %;
    }
	/* Endstatus */
    100 % {
        Hintergrundposition: 100 % 0 %;
    }
}
.btn_demo {
    Breite: 180px;
    Höhe: 60px;
    Rahmenradius: 10px;
    Position: relativ;
    Hintergrund: linearer Farbverlauf (90 Grad, #373d42 0 %, #2679dd 50 %, #373d42 100 %);
    Hintergrundgröße: 400 % 100 %;
    Animation: Farbbewegung, 5 s, unendliches abwechselndes Ein- und Ausblenden;
    Cursor: Zeiger;
}
.btn_demo:hover {
    Hintergrund: #2679dd;
}
.btn_demo:aktiv {
    Hintergrund: #373d42;
}
.btn_demo > .text {
    /* Hintergrund: gelb; */
    Breite: 50px;
    Textausrichtung: zentriert;
    Position: absolut;
    links: 50%;
    oben: 50 %;
    transformieren: übersetzen(-50 %,-50 %);
    Schriftgröße: 20px;
    Farbe: #fff;
    Schriftstärke: fett;
}
.btn_demo > .Pfeil {
    /* Hintergrund: grün; */
    Breite: 20px;
    Textausrichtung: zentriert;
    Position: absolut;
    Schriftgröße: 30px;
    Farbe: #fff;
    oben: 46 %;
    transformieren: verschiebeY(-50%);
    links: 130px; /* 130~150px verschieben */
    /* Animation aufrufen */
    Animationsname: Pfeilbewegung;
    /* Dauer */
    Animationsdauer: 1 s;
    /* Endlose Wiedergabe*/
    Anzahl der Animationsiterationen: unendlich;
}