Buttons: Corners, bold, borders, and other styles

Miguel Panayotty

Learn how to adjust your button styles to design what you want. Create bold buttons, rounded buttons, and more.

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

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

2. Click General Styles

3. Under Buttons, click Font

4. Click in the Font Weight field to select 'bold' or 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

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

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.