Create button styles in EasyEditor

Button styles are saved CSS rules that you can apply to buttons from the EasyEditor user interface.

Gareth Burroughes avatar
Written by Gareth Burroughes
Updated over a week ago

By creating button styles in your templates, you make sure that your users are using a consistent style in their designs. Using a consistent style helps your contacts to recognise you and reinforces your brand or company image.

To create and save new button styles, you must add CSS to the source code of your template.

After you've created a new button style, we recommend that you use the style manager to edit that button style instead of editing it in the source code.

If you want to stop your users from editing your styles, you can lock them.

The information in this article also applies to EasyEditor for landing pages.

Find the CSS rules for your button styles

Go to Utilities > Edit Source and find the last internal stylesheet that has an ee-styles attribute. The button style rules are at the bottom of this stylesheet.

<style ee-styles="" ee-render="inline"></style>

Edit the default button style

The .button-td.Default.definition rule is the 'Default style' in the 'Styles' dropdown and it is applied by default to all new button building blocks.

Your default-button-style rule looks like this:

.button-td.Default.definition {}

If you edit the .button-td.Default.definition rule, you must make sure that the following five rules below it have the same values for any properties that they each have in common with the .button-td.Default.definition rule. Otherwise, any properties in the .button-td.Default.definition rule are ignored when you apply the 'Default style' in the style manager.

.button-container {}.button-container .button-wrapper {}.button-container .button-td {}.button-container .button-td .button-a, .button-container .ee_editable.button-a {}.button-container .button-td .button-a a, .button-container .ee_editable.button-a a {}

Automatic updates to these five rules

To automatically create or update the five rules below a button style definition rule, edit only the button style definition rule, then edit that style in the style manager.

Create and save a button style

  1. Copy the entire default button style rule and paste this rule at the bottom of the internal stylesheet that has the ee-styles attribute.

  2. Name your button style by changing MyNewButtonStyleto your chosen name:
    ​.button-td.MyNewButtonStyle.definition {/* make sure you copy all of the properties from the default button style rule and change them to what you want */}.

  3. Select Edit design, and then select a button.

  4. In the Styles dropdown, select Manage my styles.

  5. Your new button is displayed at the bottom of this list.

Before applying a new button style

Before you apply your new button style, you need to edit it in the style manager. Otherwise, the button style won't work.

Remove a button style

To remove a button style, delete the button style definition rule and the five rules below it from the internal stylesheet that has the ee-styles attribute.

Important

You can't undo this action. Any buttons that had this style applied to them will not automatically have the default style applied to them.

Did this answer your question?