Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Adding hover states - Add hover states for buttons and links with support notes and previews.. Machine-readable page: /emailify/design/hover.md.

Adding hover states

Add hover states for buttons and links with support notes and previews.

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.

Video Tutorial: Add hover effects to buttons in HTML emails from Figma

This video walks through 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.

You can set any/all of the following properties:

  • Background Color
  • Text Color
  • Transition

You can preview your hover states using the preview HTML feature in the plugin.

Adding hover states to text and navigation links ​

Video Tutorial: Add hover colors to text links in HTML emails from Figma

This video walks through 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.

You can preview your hover states using the preview HTML feature in the plugin.

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.