Adding custom button styles to themes

When inserting a link, you can choose from a number of theme-specific button styles. To add custom button styles to a theme, follow these steps:

1. Enable theme overrides and download the theme files.
2. Within your theme's root folder, open the LinkStyles.cfg file for editing (using any text editor). It is a regular .XML file, with the following structure:
   <LinkStyles>   <Style>stylizedButton buttonStyle001</Style>   <Style>stylizedButton buttonStyle002</Style> </LinkStyles>
3. For each button style you want to add, insert another <Style> entry. The value within the <Style> and </Style> tags is the class name for the style.
   <LinkStyles>   <Style>stylizedButton buttonStyle001</Style>   <Style>stylizedButton buttonStyle002</Style>   <Style>myFavoriteButtonStyle</Style> </LinkStyles>
   You can add compound classes as we did with the first two styles in the above example.
4. For each style, add the CSS class description to your CSS/LESS. For example:
   .myFavoriteButtonStyle {   display: block;   background-color: #000;   color: #fff;   padding: 5px 15px; } 
   For Bookshelf, Treehouse, Clean lines, Whitespace, and Dark Impact themes, add the class to /Styles/link.styles.less. For all other themes, add the class to /Styles/theme.css or create a new CSS file under /Styles/ folder.
5. After you have finished modifying these files, upload them to the appropriate folder under the Theme_Overrides folder on your site from the Files screen or using WebDAV. 
6. Rebuild your theme.

Your button style will now appear in the Styles dropdown on the Insert link dialog. The resulting HTML for links formatted using your custom button style would appear as follows:

<a href="#somelink" class="myFavoriteButtonStyle>Some text here</a>