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
Copy the entire default button style rule and paste this rule at the bottom of the internal stylesheet that has the
ee-stylesattribute.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 */}.Select Edit design, and then select a button.
In the Styles dropdown, select Manage my styles.
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.