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:
Property | Description | Example |
Button text | The label displayed on the button | Shop Now |
Link URL | Where the button links to | |
Background color | Set via Figma's fill on the button frame | #E94560 |
Text color | Set via Figma's text fill | #FFFFFF |
Border radius | Set via Figma's corner radius | 4px |
Padding | Set via Figma's auto layout padding | 12px 24px |
Font size | Set via Figma's text settings | 16px |
Width | Full width or auto (content-fit) | auto |
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.
Powered by