Skip to main content
Buttons are your primary conversion tool. A well-designed button draws the eye and makes the next step obvious. The Email Love plugin uses MJML’s button component, which renders as a bulletproof button across all email clients, including the notoriously difficult Outlook.

​
Adding Buttons

Select a column in your design, then open the Build Your Own tab in the Email Love plugin. Click Button to add a button component into the selected column. The component includes the button text, background color, and link properties.

​
Button Properties

Configure your button using the Email Love plugin’s properties panel:

​
Button Colors from Merge Tags

If your ESP stores a button color per customer or per brand, you can have the button take its color from a merge tag instead of a fixed hex.
  1. Create a Figma color style and put the merge tag in the last part of its name, for example Brand/#{{button_color}}.
  2. Apply the style to the button’s fill. You can also apply merge-tag styles to the label text and the button border.
  3. Export. The HTML has #{{button_color}} where the hex would be, and your ESP fills it in at send time.
A few things to know:
  • The name is used exactly as written. Include the # in the style name if your ESP variable holds a bare hex like 1E6B52. Leave it out if the variable already includes the #. The plugin never adds or removes it.
  • The canvas still shows the style’s real color, so you can design with a sample color.
  • The plugin preview can’t fill in the merge tag, so a merge-tag button shows in an unrelated color there. The exported email is not affected.
  • Dark mode leaves these buttons alone. They keep the colors your ESP fills in. A dark button color set on the button itself doesn’t apply to a merge-tag button.
  • Saving keeps the style. Buttons saved to Customs or a design system keep the color style and link it again when you insert them into another file that has the style.
  • Buttons only for now. Text, section and column colors still export as hex.

​
Fallback color

If a recipient has no color stored, the merge tag comes out empty and the button has no valid background. Add a fallback in the style name using your ESP’s default syntax, so those recipients get a set color instead. For ESPs that use Liquid, such as Braze and Customer.io, name the style like this: Brand/#{{button_color | default: '000000'}} Recipients with a button_color get their color. Everyone else gets black (#000000). The export writes the whole tag, including the fallback, into the HTML and the Outlook version of the button. Pick a fallback that works in both light and dark mode. Dark mode leaves merge-tag buttons alone, so a black fallback can almost disappear on a dark background in Outlook, Apple Mail and Outlook.com. Two options that hold up in both modes:
  • Keep black and add a 2px white border to the button. The border can’t be seen on a white background, and it shows as an outline in dark mode. The border is added on top of the button’s padding, so the exported button is 4px taller than in Figma. Reduce the top and bottom padding by 2px each if you need the heights to match.
  • Use a mid-tone color, such as a medium blue, that has enough contrast against both white and dark backgrounds.

​
Button Hover States

You can define how a button looks when the reader hovers over it in their email client. With a 🔗 Button layer selected, open the Properties tab and find the Button Hover State section, where you can set:
  • Background Color: the button’s background color on hover
  • Text Color: the label color on hover
  • Transition: an animated effect from a set of 15, including Fade, Grow, Shrink, Bounce In, Bounce Out, Rotate, Float, Sink, Skew, Forward, and Backward
Hover the button in the plugin’s Preview to see the effect live. The hover styles are included automatically in Copy, Export, and every ESP export, and they survive saving the button as a custom component or template. A few things to know:
  • Leaving a color set to None means “no change on hover.” The button keeps its resting color. Use the X button in the color picker (or type none) to clear a hover color.
  • Hover states are progressive enhancement. The resting button is never altered, so clients that don’t support hover simply show your normal button.
  • Client support varies: Apple Mail supports both hover colors and motion effects. Gmail’s desktop webmail supports hover colors and the Fade transition but strips motion effects like Grow and Float. Outlook for Windows and the Gmail/Outlook mobile apps don’t support hover at all.
  • No canvas preview. Hover styling lives in the plugin (and your exported HTML), not on the Figma canvas itself.

​
Design Best Practices

  • Make it obvious: Use a contrasting color that stands out from surrounding content. If your email is mostly white and blue, an orange or red button pops.
  • Action-oriented text: Use verbs: “Shop Now,” “Get Started,” “Download Free Guide.” Avoid vague labels like “Click Here” or “Learn More” (unless your audience knows exactly what they’re learning about).
  • Size for tapping: Minimum height of 44px with at least 16px padding on all sides. Fingers are imprecise. Make the target generous.
  • One primary CTA per email: You can have multiple buttons, but make one clearly dominant with size, color, or placement.
  • Limit to 2-3 buttons total: Too many CTAs dilute the impact of each one.

​
Outlook Rendering

Outlook on Windows doesn’t support CSS-based buttons reliably. The Email Love plugin generates VML (Vector Markup Language) fallback code that renders bulletproof buttons in Outlook. A few things to know:
  • Border radius is ignored in Outlook on Windows. Buttons render as rectangles
  • Gradients on buttons won’t render in Outlook. Use solid background colors
  • The VML button matches your solid background color and text styling exactly
  • In dark mode, filled buttons with a one-line label keep their label color. Outline buttons and labels that wrap to two lines use the standard label, which Outlook may recolor

​
Mobile Overrides

The plugin automatically syncs button mobile width based on how you’ve sized the button in Figma:
  • Fill (button stretches to fill the column) → The plugin automatically enables full-width on mobile (width: 100%). This means your button will span the full column width on both desktop and mobile. The label keeps the left and right padding you set in Figma, so it doesn’t wrap early in narrow columns.
  • Hug or Fixed width → The plugin automatically keeps the button at its fixed width on mobile.
You can always override this manually in the Mobile Styles tab if you want different behavior. Additional mobile tips:
  • Font size: Keep button text at 16px minimum on mobile
  • Padding: Increase vertical padding for a larger tap target

​
Common Issues

  • Button text wraps unexpectedly: Your button text is too long or padding is too large. Shorten the text or reduce horizontal padding.
  • Button isn’t clickable: Check that the link URL is set in the plugin’s properties panel, not in Figma’s prototype settings.
  • Button color looks wrong in dark mode: Set a dark-mode Button Color and Button Text Color in the Appearance tab, and pick a mid-tone brand colour with white text. A white or light button in dark mode is forced to dark grey by Mac Mail and becomes unreadable. See the dark mode setup that works everywhere.