---
url: "/emailify/tutorials/add-hover-effects-to-buttons-in-html-emails-from-figma.md"
description: "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."
---

# Add hover effects to buttons in HTML emails from Figma

> 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.

[← Back to Emailify Video Tutorials](/emailify/tutorials)

[Embedded media](https://www.youtube.com/embed/8pydrphK6bU)

**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](https://www.youtube.com/watch?v=8pydrphK6bU)
- [Read the full video transcript](https://www.hypermatic.com/tutorials/how-to-add-hover-effects-to-buttons-in-html-emails-from-figma-using-emailify)
- [Browse Emailify tutorial docs](https://docs.hypermatic.com/emailify/tutorials)