Ein Button, der sich beim Überfahren mit der Maus verändert, wirkt lebendig und zeigt: Hier kannst du klicken. In Divi 5 stellst du das ohne Code ein. Du wechselst in den Zustand „Hover“ und änderst dort Farbe, Schrift und mehr.
Ich zeige es am Button-Modul, das Prinzip gilt aber für die meisten Module. Getestet mit Divi 5 (Version 5.13, deutsche Oberfläche), Stand Oktober 2026. Den Button selbst baust du wie in Button-Modul in Divi 5 beschrieben, sein Grundaussehen steht in Divi-Button anpassen.
Die Zustände in Divi 5
Wähl den Button aus und öffne den Reiter „Design“. Rechts neben den Reitern sitzt ein kleines Symbol mit Pfeil, normalerweise das Rechteck für „Desktop“. Ein Klick darauf klappt eine Liste auf:
Die Liste der Zustände: Geräte und Interaktionen in einem Menü.Die Liste kombiniert zwei Dinge: die Geräte („Desktop“, „Tablet“, „Telefon“) und die Zustände „Hover“, „Fokus“, „Aktiviert“ und „Aktiv“. Ich habe „Hover“ getestet und bleibe dabei. Die anderen Zustände heißen so in der Oberfläche, ich habe sie nicht ausprobiert.
Hover aktivieren und Farbe ändern
- Wähl in der Liste „Hover“. Das Symbol wird zum Mauszeiger. Jetzt gelten alle Einstellungen, die du änderst, nur für den Moment, in dem die Maus über dem Button liegt.
- Öffne die Gruppe „Button“ und darin die Untergruppe „Hintergrund“.
- Trag bei „Button Hintergrundfarbe“ den Hover-Farbwert ein, zum Beispiel
#c7124a, und bestätige mit Enter.
Der Mauszeiger neben den Reitern zeigt: Du bearbeitest gerade den Hover-Zustand.
Die Hover-Farbe im Feld „Button Hintergrundfarbe“.Der Builder zeigt dir die Hover-Farbe sofort an, auch wenn du die Maus nicht über dem Button hast. Das ist praktisch, aber verwirrend, wenn du den Zustand vergessen hast: Der Button sieht dann im Builder verändert aus. Schalte also zurück auf „Desktop“, bevor du etwas anderes einstellst.
Schriftfarbe beim Überfahren
Bleib im Hover-Zustand, öffne die Untergruppe „Text“ und setz „Button Textfarbe“ auf einen eigenen Wert, ich habe ein helles Gelb (#ffe9a8) genommen. So wechselt auch die Schrift ihre Farbe.
Auch die Textfarbe lässt sich für Hover getrennt festlegen.Übergang: wie schnell soll es gehen?
Ohne weitere Einstellung blendet Divi die Farbe in 300 Millisekunden um, das zeigt der Platzhalter im Feld. Das ändert sich im Reiter „Erweitert“ in der Gruppe „Übergänge“. Dort stehen „Übergangsdauer“, „Übergangsverzögerung“ und „Übergangs-Geschwindigkeitskurve“ (Standard: Ease).
Stolperfalle: Diese Felder sind im Hover-Zustand ausgegraut und lassen sich nicht bearbeiten. Schalte zuerst zurück auf „Desktop“ und trag erst dann die Dauer ein, bei mir waren es 800 Millisekunden.
Die Übergangsdauer stellst du im Zustand „Desktop“ ein.So sieht es auf der Seite aus
Nach dem Speichern habe ich die Seite im Frontend geöffnet. Zuerst der Button im Ruhezustand, danach mit der Maus darüber:
Ruhezustand: dunkelblau mit weißer Schrift.
Beim Überfahren: roter Hintergrund, gelbe Schrift und ein Pfeil.Aufgefallen ist mir der Pfeil rechts: Divi zeigt beim Hover auch ohne eigene Einstellung ein Icon an. Möchtest du das nicht, schau in der Untergruppe „Icon“ nach den Schaltern „Button-Icon Anzeigen“ und „Icon Nur Beim Hover Für Button Anzeigen“.
Meine Empfehlung
Halte den Hover-Effekt dezent: eine etwas dunklere oder hellere Farbe reicht, die Dauer zwischen 200 und 400 Millisekunden fühlt sich flüssig an. Und denk daran, dass es auf dem Handy kein Überfahren mit der Maus gibt. Die Information muss auch ohne Hover klar sein. Divi bekommst du bei Elegant Themes (Werbung).
