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
Use the Mobile Styles tab to optimize buttons for mobile:
- Full width: Consider making buttons full-width on mobile for easier tapping
- 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