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?

To create and style two side-by-side buttons in Webflow without relying on external CSS (since Mailchimp and Mandrill might strip or overwrite styles), follow these steps:

1. Use a Grid or Flexbox for Layout

• Use a Div Block to contain both buttons.
• Set the Display property to Flex (Horizontal) or use a 2-column Grid.
• Adjust the gap or margin between the buttons to ensure proper spacing.

2. Create the Buttons Using Webflow’s Native UI

• Add two Button elements inside the Div Block.
• Use Webflow’s Style panel to set button colors, padding, borders, and text styles directly in the visual editor.

3. Use Inline Styling to Preserve Formatting

Since email clients may strip external styles, apply all critical styles inline:

• Webflow already applies inline styles for text color, background color, padding, and border-radius when using the visual editor.
• Make sure each button has unique styling at the element level to prevent template-wide stylesheet overrides.

4. Convert to Static HTML Before Exporting to Mailchimp

• In Webflow, go to Page Settings → Export Code and copy the button section’s HTML.
• Ensure the exported code retains inline styles by previewing it in Webflow before importing into Mailchimp.

Summary

To prevent Mailchimp and Mandrill from stripping styles, use Webflow’s visual design tools for inline styling. A Flexbox or Grid can align the buttons, and all critical styles (colors, padding, and border-radius) should be applied directly in Webflow. Before sending through Mandrill, check the exported HTML to confirm styles are inline.