Buttons: corners, bold text, stretch and trendy designs

This 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, how to keep your text from wrapping and 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 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. Open your design in Modern Editor.

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

3. Under ESSENTIALS, click General Styles.

4. Under BUTTONS, open the Background and Border element.

5. 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 your preview panel (right side), click the STYLE tab and then complete steps 4-5 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 just one button.

 

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


1. Open your design in Modern Editor.

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

3. Under ESSENTIALS, click General Styles.

 

4. Under BUTTONS, open the Font element.

5. 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 STYLE tab and then complete steps 4-5 above.

 

 

 

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 design in Modern Editor.

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

2. Under ESSENTIALS, click General Styles.

3. Under BUTTONS, open the Background and Border element.

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

 

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 editor content 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 with long button text pushing the right side of the design 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 design in Modern Editor.

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

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 design in Modern Editor.

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

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

4. 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;
            }

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

6. Under ESSENTIALS, 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 preview panel will also switch to the mobile view.

8. Under BUTTONS, open the Background and Border element.

9. In Width field, type 100%.

10. Click on the BLOCKS tab again.

11. Select one button from the preview panel (right side).

12. Click on the STYLES tab from the edit content panel (left side).

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