Button styles: rounded corners, bold text, stretch on mobile and trendy designs (Modern Editor)

This support article is all about buttons in Modern Editor and how you can update styles to create specific designs. Learn how to create bold buttons, rounded buttons, and how to keep your text from wrapping as well as some other trendy ideas.

 


Topics covered in this article:

Rounded or Square buttons

Buttons with bold text

Buttons with border outline

Make button text stay on one line

Buttons that stretch across the screen on mobile

 

 

Rounded or Square buttons

 

Create rounded or square corner buttons easily with just a quick update in your HTML.


Follow these instructions to update your button corners:

1. Open your email template

2. Click on the HTML tab in the lower left corner

3. Search for "border-radius"

4. Adjust the value "border-radius: 3px;" higher for rounded corners and lower for square corners

 

 

This adjusts your button style globally in the email template. You can also find individual buttons and only change those buttons in the template if you want one button different than the rest.


Ideas:

  • border-radius: 5px; would make the corners rounder
  • border-radius: 0px; would make the corners square
  • border-radius: 0 10px; would make two corners square and two corners round (interesting look!)

 

Note: Rounded corners do not appear in Outlook versions (PC), Outlook.com, Yahoo webmail, and Lotus Notes.

 

 

Buttons with bold text

 

Button text can be updated to bold by setting font weight. You can change this for all your buttons or just one button.

 

To set button font weight to bold as a global style for all buttons:


1. Open your email template

2. Click on the STYLESHEET tab on the edit content panel (left side of editor)

2. Under ESSENTIALS, click General Styles

3. Under BUTTONS, click Font <a> and the click in the field Font Weight to select 'bold'. Or simply type in bold into this field

 

This adjusts your button style globally in the email template. You can also find individual buttons, open the STYLES from the editor content panel and only change the styles of the one button.

 

 

 

 

Buttons with border outline

 

Create a trendy button design by outlining your button.

Follow these instructions to create this trendy look for your buttons:

1. Open your email template

2. Click on the STYLESHEET tab on the edit content panel (left side of editor)

2. Under ESSENTIALS, click General Styles

3. Under BUTTONS, click Background & Border <div> and make the following updates:

  • Set the Background color to white or the color of your email background if not white
  • Enter a pixel value for Border Width
  • Enter a Border Style
  • Enter a Border Color

4. Under BUTTONS, click Font <a> and update the Color to the same color as the border or a color of your choosing.

 

This adjusts your button style globally in the email template. You can also find individual buttons, open the STYLES from the editor content panel and only change the styles of the one button.

 

 

 

Make button text stay on one line

 

Some email clients (like Outlook) like to wrap button text onto two lines. You can apply a no-wrap style to ensure your buttons stay on one line.

 

Note: This option may cause rendering issues with long button text pushing the right side of the template out. Keep your button text short to avoid this issue.

 

Follow these instructions to force button text to stay on one line:

1. Open your email template

2. Click on the button you would like to adjust the text wrap for

3. In the Class field, select or manually type in 'no-wrap'

 

 

 

 

Buttons that stretch across the screen on mobile


Make your buttons stretch across the screen on a mobile device.

 

 

Follow these instructions to force your buttons to stretch across on mobile:

1. Open your email template

2. Click on the HTML tab in the lower left corner

3. In the HTML, search for second </style> tag in the HTML

4. Paste in the code below directly below "width: 100% !important; }" and then exit the HTML view

div.button div {
              padding-left: 0 !important;
              padding-right: 0 !important;
              width: 100% !important;
            }

 

5. Go to STYLESHEET tab on the edit content panel (left side of the editor)

6. Click General Styles

7. Change toggle from Global to Mobile.

You'll know this option is selected when you see the Phone icons appear next to each style section. Your email preview panel will also switch to the mobile view.

8. Click Buttons "Background & Border"

9. In Width field, type 100%.

10. Click on the BLOCKS tab again

11. Select one button in the email from the right side of the editor

12. Click on the STYLES tab from the right side of the editor

13. While still on the mobile toggle, open the Container

14. Adjust the padding to 0px.

 

 

 

 

Have more questions? Submit a request
Powered by Zendesk