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

​
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.
  • 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: Dark mode may invert your button colors. Test in dark mode preview and consider setting custom dark mode colors for iOS.