Buttons: Corners, bold, borders, and other styles

In this article

Introduction to buttons

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

 

Learn how to adjust your button styles in Modern Editor to design what you want! Create bold buttons, rounded buttons, and learn about other button designs.

 

 

Introduction to buttons

Buttons in HTML email can be built with code or can be images. We recommend using coded buttons to make your emails accessible in more ways because images may not download in the email client.

 

What to expect:

  • Buttons in Modern Editor are bullet-proof buttons. This means the buttons work in most email clients.
  • The click area of the button is the text. Adding code to make the whole button clickable does not work in Outlook PC.

 

 

 

Rounded or Square buttons

Create rounded or square corner buttons by adjusting the border-radius of any button. In WordFly starter emails, the default border-radius value is 3px.

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 PC, Outlook.com, Yahoo webmail, and Lotus Notes.

 

To update button corners globally for all buttons

1. Click the Stylesheet tab in the left panel

2. Click General Styles

3. Under Buttons, click Background & Border

4. Enter a pixel value for border-radius

Example: 0px makes square corners

 

This adjusts your button style globally in the design. To update the style of a single button, select the button block from the right panel, click the Styles tab and then complete steps 3-4 above.

 

 

 

Buttons with bold text

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

 

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

1. Click the Stylesheet tab on the left panel

 

2. Click General Styles

 

 

3. Under Buttons, click Font

 

4. Click in the Font Weight field to select 'bold'. Or simply type 'bold' into this field.

 

This adjusts your button style globally in the design. To update the style of a single button, select the button block from your preview panel (right side), click the Styles tab and then complete steps 3-4 above.

 

 

 

Buttons with border outline

 

 

To create an outlined button

1. Click the Stylesheet tab in the left panel

 

2. Click General Styles

 

3. Under Buttons, click Background & Border

 

4. Make the following updates:

  • Set the Background color to white or the color of your email background, if not white

  • Open the Border section
  • Enter a pixel value for Border Width
  • Enter a Border Style
  • Enter a Border Color

 

5. Under BUTTONS, click Font

 

6. Update the Font Color to the same color as the border or a color of your choosing.

This adjusts your button style globally in the design. You can also find individual buttons, open the Styles from the left panel and only change the styles of the one button.

 

 

 

Make button text stay on one line

Some email clients (like Outlook) and web browsers 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 in Outlook PC with long button text pushing the right side of the design out. Keep your button text short to avoid this issue.

 

To force button text to stay on one line:

1. Click on the button you would like to adjust the text wrap for from the right panel

 

2. 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.

Note: Outlook PC may experience rendering issues from the Width %.

 

 

To create buttons that stretch across on mobile

1. Click the HTML tab in the lower-left corner

 

2. In the HTML, use Ctrl+F and search for the second </style> tag in the HTML

 

3. Paste in the following 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;
            }

 

4. Click the Stylesheet tab in the left panel

 

5. Click General Styles

 

6. Change toggle from Global to Mobile

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

 

7. Under Buttons, click Background & Border

 

8. In Width field, type 100%

9. Click the Spacing section

 

10. Adjust the left and right padding to 0px