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?

TL;DR
  • Drag two Button elements onto the canvas in Webflow, wrap them in a Div Block, and set it to Flex for side-by-side alignment.
  • Customize button styles such as background, text color, padding, and borders via the Style panel.
  • Export the HTML and embed it in email platforms like Mailchimp to ensure style integrity is maintained.

Creating and styling buttons in Webflow without relying heavily on CSS ensures that the styles remain intact when transferred to platforms like Mailchimp and Mandrill.

​

1. Add Buttons to Your Webflow Project

  • Open your Webflow project, then navigate to the Designer.
  • Drag and drop two Button elements from the Add panel onto your canvas within the same section or div. This will ensure they are aligned side-by-side by default.

​

2. Structure Buttons for Side-by-Side Alignment

  • Wrap the buttons in a div block to keep them together. Drag a Div Block element from the Add panel and place both buttons inside it.
  • Set the display of this Div Block to Flex by selecting it, then in the Style panel, click the display setting and choose Flex. This will make the buttons align next to one another horizontally.

​

3. Style the Buttons Directly in Webflow

  • Select each button one at a time in the Designer.
  • Use the Style panel to customize each button's appearance including:
  • Background color: Set the desired background color under the Background section.
  • Text color: Adjust text color in the Typography section.
  • Padding and margin: Modify padding to control button size and add margin if needed for spacing.
  • Borders and rounded corners: Define border thickness and radius for a rounded appearance.
  • Button Size: Set fixed width or leave as auto to allow text to dictate the width.
  • Preview the buttons to ensure they appear as desired and adjust the styles as necessary.

​

4. Export Designed Elements for Email Use

  • After finalizing the design, export the entire HTML of your page where the buttons are located.
  • In your email platform like Mailchimp, embed the HTML content that includes inline styles created directly through Webflow. Ensure your email template allows for inserting raw HTML.

​

5. Test the Email Output

  • Once you’ve set up the HTML in Mailchimp, send a test email to confirm that styles are maintained when the email is delivered through Mandrill.
  • Check different email clients to ensure consistent appearance cross-platform.

​

Summary

To create and style two side-by-side buttons in Webflow without risking CSS overwriting in email templates, design directly within Webflow's Designer using inline styles. Use flexbox for alignment and customize button styles through the Style panel. Export the HTML and use it directly in Mailchimp to maintain styling integrity.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I vertically center a container inside a section in Webflow? Thanks.
Is the child perspective adjustment not available in the free version of Webflow for 3D transforms?
How can I create a background image with two pictures, a white line, and a blue background in Webflow? The current method I'm using with one big background image is not accurate in terms of size, scalability, and quality. Is there a better way to achieve this in Webflow? Thank you for your help.
How can I set up a collection tracking site using Webflow CMS as the back-end, where users can sign up for a paid account and track their collection against a master list hosted in the CMS? Are there any options, preferably not paid, that can accomplish this?
How can I ensure the blur effect in Webflow covers the entire div when using CSS styles like the one shown below?
How can I preserve the forward slash in the custom URL slug for my Category Collection in Webflow? I want to format my blog categories like this: "site.com/blog/category/category-name". The current format is "site.com/blog-category/category-name" and I want to mirror the SEO authority's blog URL structure.
How can I authenticate HTTP GET requests in Webflow without custom code? Can Logic in Webflow be used to trigger server-side calls on page load and pass URL parameters to Logic? Is it possible to display the data returned from Logic in an HTML element within Webflow? Thank you!
How can I allow Webflow Forms to capture the current article's URL so that I can receive emails with that URL and better follow-up on inquiries related to each specific article on my site?
What are some new functions available through the CMS on Webflow with the release of the new Dynamics Embed widget?
How can I fix the padding and font color on a Webflow select dropdown?
Can Webflow allow for custom redirect URLs for each contact form in CMS templates to create separate thank-you pages for landing pages?
Is it possible to hide the "thank you" page on Webflow from being indexed by Google?
What is the current best workaround in Webflow for adding a "select country" list into forms, without using ecommerce and considering limitations on maximum number of items and characters for custom code?
How can I ensure that the video maintains its dimensions of 1920x1080 on all breakpoints in Webflow?
How can I fix the required slug field issue when integrating Webflow with Zapier for sending form data into CMS?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?