← Back to Emailify Video Tutorials

What this video covers

This tutorial shows how to add hover effects to Emailify button components in Figma for HTML emails. It covers setting hover background and text colors, adding transitions like fade or grow, and exporting the result to HTML for previewing in supported email clients.

Things you'll need

• Figma
• Emailify Figma plugin
• An Emailify button component already added to the email

Steps

1. Open the Emailify Figma plugin from Resources, then run it from Saved Plugins.
2. Create or open an email layout and make sure the button is an Emailify button component.
3. Select the button layer and open HTML and mobile settings to reveal the button hover state options.
4. Set the hover background color and hover text color using hex values.
5. Optionally choose a transition such as fade, grow, or bounce to animate the hover effect.
6. If desired, add a stroke to the button in Figma to create an outlined or ghost-button hover look.
7. Export the email to HTML, download the zip file, and check the generated hover effects in the preview or browser.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Adding hover states
• Next: Add hover colors to text links in HTML emails from Figma
• Open Emailify in the Figma Community