This video tutorial is a complete step-by-step guide showing you how to add hover effects to buttons in HTML emails from Figma using the Emailify Figma plugin.
You can apply hover states to any Emailify ”🔗 Button” layer by selecting the layer while the Settings panel is open, then adding the hex color values and/or selecting the animated transition option you’d like to apply to the selected button layer on hover under the Button Hover State area.
Hover styles aren’t supported everywhere. Currently, support for hover styles in email clients is still relatively low; so please be aware of this and try to design your emails with the “progressive enhancement” of these hover styles in mind. If an email client doesn’t support hover styles, the button’s hover state will just fall back to looking the same as its normal state when the user hovers over it.
This video tutorial is a complete step-by-step guide showing you how to add hover colors to text links in HTML emails from Figma using the Emailify Figma plugin.
You can apply hover states to any Emailify “✍️ Text” or ”🍔 Navigation” layer by selecting the layer while the Settings panel is open, then adding the hex color value you’d like to apply to any text links in the selected layer on hover under the Links Hover State area.
You can also optionally enable the Fade Transition toggle, which will add a slight color transition to the link’s text color change on hover.
Hover styles aren’t supported everywhere. Currently, support for hover styles in email clients is still relatively low; so please be aware of this and try to design your emails with the “progressive enhancement” of these hover styles in mind. If an email client doesn’t support hover styles, the button’s hover state will just fall back to looking the same as its normal state when the user hovers over it.
