In diesem Video zeige ich dir, wie du in Webflow einen Button erstellst, bei dem ein Pfeil beim Hover leicht rotiert und gleichzeitig die Hintergrundfarbe des Buttons wechselt.

Für alle die sich kein Video ansehen wollen, habe ich hier nochmal eine kurze Anleitung geschrieben:

‍

Schritt-Anleitung

1. Erstelle einen Link-Block:

Füge einen Link-Block zu deiner Seite hinzu und weise ihm die Klasse Button zu. Ergänze zudem die Combo-Klasse “is-icon”.
Stelle anschließend sicher, dass der Flex-Layout-Modus auf horizontal gesetzt ist, damit der Text und das Icon nebeneinander und nicht untereinander angezeigt werde.

‍

2. Füge einen Text-Block hinzu:

Ziehe einen Text-Block in den Link-Block, um den Text des Buttons (z. B. „Mehr erfahren“) hinzuzufügen.

‍

3. Füge ein Embed-Field hinzu:

Füge innerhalb des Link-Blocks ein Embed-Field ein.

‍

4. SVG-Icon einfügen:

Um ein passendes Icon zu finden, empfehle ich die Google Material Icons. Lade das Icon als SVG herunter.
Nun kannst du auf dieser Seite, die SVG hochladen und dir im Anschluss den SVG-Path rauskopieren.
Kopiere den SVG-Path des Icons und füge ihn in das Embed-Field ein.

‍

5. Icon anpassen:

Setze im Embed-Field die height und width des Icons im SVG Path auf 100%.
Setze außerdem fill auf currentColor, sodass du die Farbe des Icons danach über den Code anpassen kannst, wenn der Button gehovert wird.

‍

6. Vergib eine Combo-Klasse für das Icon:

Weise dem Icon die Combo-Klasse “icon-button” zu, um es korrekt zu stylen.
Diese Combo-Klasse sollte eine feste Größe von zum Beispiel 24 Pixel oder 1.5 Rem haben und einen Border-Radius von 100%, damit das Icon rund dargestellt wird.

‍

7. Code in Page-Settings einfügen:

Öffne die Page Settings deiner Seite und füge den bereitgestellten CSS-Code ein. Dieser Code enthält alle notwendigen Transitions, Rotate- und Transform-Eigenschaften für die Animation.
Hinweis: Im Webflow-Designer wird die Animation nicht sichtbar sein, aber auf der Live-Seite funktioniert sie einwandfrei

‍

<style>
.icon-button {
  transition: transform 0.3s ease-out, color 0.3s ease-out, background-color 0.3s ease-out;
  background-color: transparent;
  color: #ffffff;
}

.button:hover .icon-button {
  transform: rotate(-45deg);
  background-color: #ffffff;
  color: #000000;
}
</style>

‍

8. Farben im CSS-Code anpassen:

Im bereitgestellten CSS-Code kannst du die Farben für den Button und das Icon nach Belieben anpassen, um sie deinem Design anzupassen.

‍

9. Vorschau und Testen:

Veröffentliche und teste die Seite, um sicherzustellen, dass der Pfeil beim Hovern des Buttons rotiert und der Hintergrund die Farbe wechselt.

‍

Du hast noch Fragen? Schreibe mir gerne eine Nachricht!

Email schreiben

Moderner Button mit rotierendem Icon on Hover