Hover-Stile werden nicht überall unterstützt. Derzeit ist die Unterstützung für Hover-Stile in E-Mail-Clients noch relativ gering. Behalte das im Hinterkopf und gestalte deine E-Mails mit Hover-Stilen nach dem Prinzip der „progressiven Verbesserung“. Unterstützt ein E-Mail-Client keine Hover-Stile, sieht der Button beim Überfahren mit der Maus einfach genauso aus wie im normalen Zustand.
Video-Tutorial: Hover-Effekte für Buttons in HTML-E-Mails aus Figma hinzufügen
Dieses Video zeigt, wie du mit dem Figma-Plugin Emailify Hover-Effekte für Buttons in HTML-E-Mails aus Figma hinzufügst.
Du kannst jeder „🔗 Button“-Ebene von Emailify Hover-Zustände zuweisen: Wähle die Ebene bei geöffnetem Settings-Panel aus und gib dann im Bereich Button Hover State die Hex-Farbwerte ein und/oder wähle die animierte Übergangsoption, die beim Überfahren auf die ausgewählte Button-Ebene angewendet werden soll.
Du kannst eine oder alle der folgenden Eigenschaften festlegen:
- Background Color
- Text Color
- Transition
Mit der HTML-Vorschau im Plugin kannst du dir deine Hover-Zustände ansehen.
Hover-Zustände für Text- und Navigationslinks hinzufügen
Video-Tutorial: Hover-Farben für Textlinks in HTML-E-Mails aus Figma hinzufügen
Dieses Video zeigt, wie du mit dem Figma-Plugin Emailify Hover-Farben für Textlinks in HTML-E-Mails aus Figma hinzufügst.
Du kannst jeder „✍️ Text“- oder „🍔 Navigation“-Ebene von Emailify Hover-Zustände zuweisen: Wähle die Ebene bei geöffnetem Settings-Panel aus und gib dann im Bereich Links Hover State den Hex-Farbwert ein, den Textlinks in der ausgewählten Ebene beim Überfahren erhalten sollen.
Optional kannst du außerdem den Schalter Fade Transition aktivieren. Er fügt der Änderung der Linkfarbe beim Überfahren einen leichten Farbübergang hinzu.
Mit der HTML-Vorschau im Plugin kannst du dir deine Hover-Zustände ansehen.
Hover-Stile werden nicht überall unterstützt. Derzeit ist die Unterstützung für Hover-Stile in E-Mail-Clients noch relativ gering. Behalte das im Hinterkopf und gestalte deine E-Mails mit Hover-Stilen nach dem Prinzip der „progressiven Verbesserung“. Unterstützt ein E-Mail-Client keine Hover-Stile, sieht der Button beim Überfahren mit der Maus einfach genauso aus wie im normalen Zustand.