Im ersten Teil unseres kleinen Tutorials zu Hover-Effekten für CSS-Buttons habe ich Ihnen optisch ansprechende und relativ einfach umzusetzende Effekte gezeigt.
Im zweiten Teil werden wir aber noch einen Schritt weiter gehen – es wird also anspruchsvoller. Allen Neueinsteigern empfehle ich deshalb, sich zuerst mit den Grundlagen der CSS-Buttons vertraut zu machen.
Aber keine Sorge, jedes Beispiel ist mit ausführlichen Erläuterungen zur Funktionsweise der CSS-Anweisungen versehen. Sie können das CSS entweder unverändert übernehmen oder an Ihre eigenen Wünsche und den Anforderungen Ihrer Website anpassen.
Der Standard-Button… unsere Arbeitsgrundlage
Download: Button-Grundgerüst zum Experimentieren (HTML)
Button mit animiertem Pfeil
Das ist der CSS-Code für den Button:
.ofa_button {
background-color: #163EFF; color: #FFFFFF; padding: 10px; width: 200px;
text-align: center; font-size: 16px;
border: 1px solid #FFFFFF;
overflow: hidden;
transition: all 0.5s;}
.ofa_button span {
display: inline-block;
position: relative;
transition: 0.5s;}
.ofa_button span::after {
content: "\003e\003e";
position: absolute;
opacity: 0;
right: -25px;
transition: 0.5s;}
.ofa_button:hover span {
padding-right: 30px;}
.ofa_button:hover span::after {
opacity: 1;
right: 0px;}
Und so funktioniert es:
In diesem Beispiel wird nicht der Button selbst animiert, sondern der darin befindliche Text, welcher zu diesem Zweck in ein <span>-Element gepackt wurde.
Mit dem Pseudoelement ::after fügen wir an das Ende von <span> einen Pfeil an. Ich habe mich für „>>“ entschieden, aber natürlich kann das Symbol frei gewählt werden. Wichtig: Auf die Länge achten und gegebenenfalls die übrigen Parameter der Animation entsprechend anpassen.
Beim Überfahren mit der Maus passieren nun zwei Dinge: Zuerst ändern wir den rechten Innenabstand von 10px auf 30px. Danach wird noch das definierte Pseudoelement sichtbar gemacht und bewegt. So entsteht der animierte Effekt eines sich einblendenden Pfeils (oder eines was auch immer).
Unicode…
Bestimmt wundern Sie sich über die Zeile content: "\003e\003e"; und warum Ihr Webbrowser daraus die Zeichen „>>“ macht: Bei 003e handelt es sich um die in hexadezimaler Schreibweise angegebene Position des „größer als“-Zeichens im Unicode-Zeichensatz.
Der Unicode-Zeichensatz ist ein plattformübergreifender Standard, der alle in der EDV nutzbaren Zeichen abbildet und so den Austausch von Informationen zwischen verschiedenen Schriftsystemen erleichtert.
In unserem Fall hatte dies aber einen ganz anderen Grund: „>“ besitzt für HTML eine besondere Bedeutung und könnte vom Browser fehlinterpretiert werden – man verwendet es ja normalerweise zum Schließen von Tags. Durch die abgewandelte Darstellung lässt sich dieses Problem elegant lösen.
