• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

OrganicWeb

Mailchimp Services for Medium & Large Organizations

  • Home
  • Services
    • Mailchimp Corporate/Team Training
    • Mailchimp Consulting
    • Mailchimp Live Public Classes
    • Mailchimp Recommendations Report
  • Free Tools
    • Mailchimp Tutorials on YouTube
    • Map maker for email
    • Is Mailchimp down?
    • Marketing facts and stats.
  • Content
    • Blog
    • Videos
  • Contact & About
    • Contact
    • About
You are here: Home / Marketing / How to add an inline button in Mailchimp

How to add an inline button in Mailchimp

The basic Mailchimp templates are easy to use, effective and best of all look great across almost all devices. In Mailchimp classes I always recommend that attendees use the basic 1 column template.

The problem with the Mailchimp button content block

Some people however find that there is too much white space in the basic templates and it isn’t easily possible to remove much of the white space. Also, Mailchimp training participants often ask if it’s possible to have an inline button rather than the button below or above content i.e. to the left or right of, usually, text.

In order to add an inline button we need to add the button as HTML rather than using the button content block. Fortunately, even if you aren’t familiar with HTML, it’s actually simple to add a button.

Instructions to add a button next to text

Instead of using the button content block for your campaign email, follow the instructions below to add an inline button.

  1. Add a text content block to your campaign builder.
  2. While in the text content block edit screen click Settings (to the top right of the screen).
  3. Under Number of columns select 2 Columns.
  4. Select the third Column split i.e. two-thirds for the first column and one third for the second column.
  5. Click Content (to the left of Settings) then Column 2.
  6. Click the Source <> icon.
  7. Delete the existing text and copy and paste the HTML as below.
     &amp;lt;table border="0" cellpadding="0" cellspacing="0" style="background-color:#009688;" width="100%"&amp;gt; &amp;lt;tbody&amp;gt; &amp;lt;tr&amp;gt; &amp;lt;td align="center" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;" valign="middle"&amp;gt;&amp;lt;a href="https://organicweb.com.au" style="color:#FFFFFF; text-decoration:none;" target="_blank"&amp;gt;Read More&amp;lt;/a&amp;gt;&amp;lt;/td&amp;gt; &amp;lt;/tr&amp;gt; &amp;lt;/tbody&amp;gt; &amp;lt;/table&amp;gt; 
  8. Edit the destination URL in the HTML to your own.
  9. Click Save & Close.

Congratulation. You now have an inline button that is responsive (looks good on desktop computers, tablets and mobile phones.

Found this useful? Please share:

Related

  • Why Mailchimp Text Formatting Looks Terrible
  • Top 5 Mailchimp Beginner Mistakes
  • Add a navigation menu to Mailchimp campaigns

Filed Under: Marketing

Watch Gary in action

Gary frequently adds Mailchimp instructional videos to his YouTube channel. Subscribe to keep updated.

→  Subscribe   ←

How to create a lead-capture form with file download.

How to target your most engaged Mailchimp contacts.

Reader Interactions

Comments

  1. eamon says

    September 12, 2017 at 9:32 pm

    please make button completely clickable

    Reply
  2. pminindia says

    May 9, 2018 at 12:43 am

    Thank you for this! How do I change the color of the button? Want to change it to #e72f78

    Reply
    • Gary says

      May 9, 2018 at 5:31 pm

      In step 7, change
      style="background-color:#009688;"
      to
      style="background-color:#e72f78;"

      Reply
  3. Ashleigh Alley says

    July 19, 2018 at 1:58 am

    in the anchor tag , under STYLE, add ‘width:100%’. That should make the button completely clickable.

    Reply
  4. KLG says

    September 5, 2018 at 11:39 am

    does this allow it to open the link in a new window?

    Reply
  5. Tania P says

    October 31, 2018 at 10:04 pm

    Thanks so much! I’ve just created a ‘Donate’ button. I read your script and managed to figure out how to adjust a few bits and pieces by referencing it against the standard Mailchimp button block. I am very happy with the result!

    Reply
  6. Sol says

    November 30, 2018 at 10:05 am

    This was super helpful! Thank you so much! Is there also a way to make it a round button? Thank you so much!

    Reply
    • Gary says

      December 2, 2018 at 11:13 am

      Sol, you’ll be able to round the corners using CSS border-radius.

      Reply
  7. andrea morgantini says

    December 4, 2018 at 11:37 pm

    You cant use border radius on table, but just add a div tag on top with border radius, and close at the end

    Reply
  8. Diana Serban says

    March 26, 2019 at 11:02 pm

    Thank you very much for this, very useful !

    Reply
  9. Mila says

    March 29, 2019 at 6:12 am

    can you please give an example of the border corner html? sorry new to html coding. thanks!

    Reply
    • Gary says

      March 31, 2019 at 6:56 am

      See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

      Reply
  10. Hannah says

    July 31, 2019 at 11:13 pm

    How do I change it to go to an email rather than opening up a web browser?

    Reply
    • Gary says

      August 1, 2019 at 11:16 am

      Hi Hannah,
      Where I have the URL of https://organicweb.com.au you’ll have mailto:hannah@example.com (obviously with the correct email address).

      Reply
  11. Chariesa says

    November 26, 2019 at 9:52 pm

    Is there a possibility to make the button responsive?

    Reply
  12. makenzie says

    February 10, 2020 at 9:19 am

    How do you make the button centered?

    Reply
    • Gary says

      February 10, 2020 at 3:45 pm

      @makenzie, the button will be as wide as the container in which the button is placed. Usually this means that the button is as wide as the content block into which it is placed. It is possible to create a three column table and using the middle column for your button (and use a width of 33.3333% to center the button) however when viewed on a small screen then the button will be very small.

      Reply
  13. Bryan says

    March 17, 2020 at 8:28 am

    Is it possible to have the button inline with text of a “Image+Text” Content block instead of this version?

    Reply
    • Gary says

      March 19, 2020 at 10:30 am

      Hi Bryan, please expand on your question; what are you trying to achieve?

      Reply
  14. Kelsey Denison says

    April 16, 2020 at 12:31 am

    As mentioned above, I would like to have a button be within the “Image + Text” content block so that it aligns nicely with each image + associated text. Currently, buttons can only live outside of this content block. Is there a way around this?

    Reply
    • Gary says

      April 16, 2020 at 9:12 am

      Hi Kelsey, using a Mailchimp layout it isn’t possible to add a button into an “image + text” content block. You could get a custom template created outside of Mailchimp which will allow this.

      Reply
  15. Syrous says

    April 17, 2020 at 8:44 am

    Hi, is it possible to right align the button on the screen? right now, it is left-aligned. how can I do that thsnks

    Reply
    • Gary says

      April 18, 2020 at 10:13 am

      @Syros, your buttons should be full-width with the text centered. Please try adding the HTML per the article once more. Once the buttons are full-width (so that we’re sure that the HTML has been added correctly) then try to change then use the following HTML

      Reply
  16. Sinavet says

    May 6, 2020 at 1:37 pm

    Hello, how can I change the font of the button and make it bold?

    Reply
    • Gary says

      May 6, 2020 at 1:56 pm

      The font is already bold and you can easily change the font-family in the HTML where it is written font-family:Helvetica, Arial …

      Reply
  17. Sinavet says

    May 6, 2020 at 1:44 pm

    Hi Gary, is it possible to make the pre-made text button of mailchimp bold? and also change the font of the button? Now they don’t function. Thanks

    Reply
    • Gary says

      May 6, 2020 at 1:54 pm

      Yes. Go to the “Style” of the button content block and you’ll be able to make amendments there: https://mailchimp.com/help/use-button-content-blocks/#Edit_style_and_settings

      Reply
  18. Anne says

    August 7, 2020 at 2:46 am

    Hi Gary — super helpful thank you. My font is what you have in your code and the weight says bold, but it still isn’t bold, just a regular weight. Any thoughts?

    Reply
    • Gary says

      August 7, 2020 at 8:25 am

      Hi Anne,
      In the code where it has style="color:#FFFFFF; text-decoration:none;" replace it with style="color:#FFFFFF; text-decoration:none;font-weight: bold!important;". That should help.

      Reply
  19. Dani Manianodiyil says

    October 20, 2020 at 9:58 pm

    Hi Gary,
    Is there anyway I can make the whole button clickable instead of just the letters. New to coding so can you please add the code

    Reply

Leave a Reply Cancel reply

Primary Sidebar

Free Mailchimp Tutorial

Learn from a Mailchimp Pro Partner

Signup to receive info about Gary's Mailchimp beginner and advanced classes.

Sign up

Gary on Australian National Radio

Changes are coming to the Australian Spam Act

Read Gary's article in SmartCompany

Meet Gary, Mailchimp Expert

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia, New Zealand and Singapore. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event. He is M.B.A. qualified from Henley Business School, U.K.

Contact Gary for your Mailchimp needs

Footer

Customer ratings

Mailchimp pro partners

Contact

Contact Gary for all your Mailchimp training, consulting and integration needs.

Contact Gary.

Copyright © 2021 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service