THEME COMPATIBILITY NOTICE:
Mobile responsive themes will automatically support buttons when using this option.
Legacy themes require some additional styles added to your theme's stylesheet. See below
Add a button to your content by easily converting any hyperlink into a button that matches your themes style.
- Select text and click the hyperlink button in the WYSIWYG editor toolbar.
- Select the "Display as button"
This will convert a standard hyperlinked word into a stylized button that matches your theme's branding.
Legacy Theme Button Styles:
Copy and add the following code to the top of your theme style sheet. Learn More
/* CH BUTTON STYLE */
a.ch-template-button{
display: inline-block;
text-decoration: {{style.hyperlink_hover_text_decoration}};
border: 1px solid {{style.hyperlink_color}};
background-color: {{style.content_background}};
color: {{style.hyperlink_color}};
font-weight: bold;
border-radius: 4px;
padding: 15px 30px;
margin: 10px 10px 10px 0;
cursor: pointer;
-webkit-appearance: none;
}
a.ch-template-button:hover{
color: {{style.nav_hover_color}};
border: 1px solid {{style.hyperlink_hover_color}};
text-decoration: {{style.hyperlink_hover_text_decoration}};
background: {{style.hyperlink_hover_color}};
}
/* END CH BUTTON STYLE */