Action Buttons
Buttons are user interface (UI) elements tied to actions and are more than just big links. Buttons are meant to give your users clues about what will happen when they are clicked. You can insert a button in your content by using <button> in the HTML, or through the CSS Class dropdown in the Rich Text Editor.
Primary Buttons
These buttons are primary calls to action and should be used sparingly. They use the class .primary. Their size can also be adjusted with the .tiny,
.small, and .large classes. In all examples below, href="#" should be replaced by the target URL in actual use.
Styles and Usage
<button href="#" class="large primary button">Large button</button><button href="#" class="primary button">Regular button</button><button href="#" class="small primary button">Small button</button><button href="#" class="tiny primary button">Tiny button</button>Secondary Buttons
These buttons are used for less important, secondary actions on a page. They use the classes .secondary, .warning, .alert, and .success.
Styles and Usage
<button class="secondary button" href="#">Secondary button</button><button class="warning button" href="#">Warning button</button><button class="alert button" href="#">Alert button</button><button class="success button" href="#">Success button</button>Combining Classes
You can style your buttons using a combination of the above classes. Below are examples of a few possible class combinations and their outcomes.
Selected Styles and Usage
<button class="large warning button" href="#">Large Warning Button</button><button class="tiny alert button" href="#">Tiny Alert Button</button><button class="small success button" href="#">Small Success Button</button>