How can I create and style two side-by-side buttons in Webflow without using CSS, so that the template can be updated in Mailchimp and sent to Mandrill without the CSS being overwritten?
- Use a Webflow Embed element to insert a two-column HTML table with inline-styled
<a>tags as buttons. - Apply all button styling inline and avoid CSS classes or modern layouts to ensure compatibility in Mailchimp, Mandrill, and common email clients.
To create and style two side-by-side buttons in Webflow without using CSS, and ensure they retain their layout when exported as HTML for use in Mailchimp and Mandrill, you’ll need to use inline styles and table-based layout, which are supported by most email clients.
1. Use Tables for Layout, Not Flexbox
- Avoid Webflow flexbox and grid layout, as email clients like Outlook may not render them correctly.
- Instead, use a Webflow ‘Embed’ element to insert a simple HTML table for layout.
2. Insert Embed Element in Webflow
Drag a Webflow Embed component into the canvas where you want the buttons.
Inside the embed, enter a basic two-column table with inline-styled
<a>tags for buttons.Example structure (keep this inline):
<table cellpadding="0" cellspacing="0" border="0"><tr><td><a href="https://example.com" style="display:inline-block; background:#0073e6; color:#ffffff; padding:12px 20px; text-decoration:none; font-family:sans-serif; font-size:14px; border-radius:4px;">Button 1</a></td><td style="width:10px;"></td><td><a href="https://example.com" style="display:inline-block; background:#555555; color:#ffffff; padding:12px 20px; text-decoration:none; font-family:sans-serif; font-size:14px; border-radius:4px;">Button 2</a></td></tr></table>
3. Inline All Styling
- Place all button styling directly inside the
style="..."attribute. - Email clients strip external
<style>blocks or<link>imports, so no CSS classes. - Use only email-safe styles: background-color, color, padding, font-family, font-size, text-decoration, display, border-radius.
4. Test Button Rendering in Mailchimp
- Export or copy the HTML from Webflow, then import it as raw code into Mailchimp.
- Use Mailchimp’s preview and send features to test in multiple clients (especially Outlook and Gmail).
- Ensure Mandrill does not reprocess or sanitize your inline styles or table layout.
5. Consider Using Email Builders for Future Templates
- Webflow is not optimized for email HTML, so for heavy email use, consider Mailchimp’s Email Builder, Stripo, or Mjml.io, which are built for email rendering standards.
Summary
To create two side-by-side buttons that retain their layout in Mailchimp and Mandrill, use a table layout with inline-styled <a> tags inside a Webflow Embed element. Avoid external CSS and complex modern layout methods to maintain full rendering support in email environments.