Adding hover states

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

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

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.