Buttons
Using HTML code, any link can look like a button by adding a class to the link. A snippet can also be used.
Methods:
Method One: How to add a class using WYSIWYG
Step 1: While being in the Edit mode, type out the text of the button at your desired place and select it all.
Step 2: Click on the "Insert/Edit Link" button on the WYSIWYG toolbar.
Step 3: Type in the Link URL or browse to a file.
Step 4: Select the "Class" from the dropdown menu.
Step 5: Click 
The page might not reflect the text as a button until publish.
Method Two: How to add a class using WYSIWYG
Step 1: While being in the Edit mode, type out the text of the button at your desired place and select it all.
Step 2: Click on the "Insert/Edit Link" button on the WYSIWYG toolbar.
Step 3: Click on the "Advanced" tab.
Step 4: Type in your desired classes. The classes can be referenced from the examples in following section on this page.
Step 5: Click
The page might not reflect the text as a button until publish.
Examples and Code:
Basic Buttons
<button>Basic Button</button>
<a class="button">Simple Button</a>
<a class="live-chat">Live Chat</a>
<a class="more">More</a>
Standard Buttons ("a" tag)
These buttons are links that look like buttons and are very flexible to style.
The class "awesome" must be included to properly style the buttons.
The code for one looks like: <a class="awesome large green">Button »</a>
| Color Classes | Size Classes | |||
|---|---|---|---|---|
| none | large | medium | small | |
| none | Button » | Button » | Button » | Button » |
| green | Button » | Button » | Button » | Button » |
| orange | Button » | Button » | Button » | Button » |
| light gray | Button » | Button » | Button » | Button » |
Standard Submit Buttons ("input" tag)
These buttons are for submitting forms. They are very flexible to style.
The code for one looks like: <input type="submit" class="awesome large green" value="Button »">
| Color Classes | Size Classes | |||
|---|---|---|---|---|
| none | large | medium | small | |
| none | ||||
| green | ||||
| orange | ||||
| light gray | ||||
Standard Buttons ("button" tag)
These buttons are usually used with JavaScript to perform an action on a page. The styles are very flexible.
The code for one looks like: <button class="awesome large green">Button »</button>
| Color Classes | Size Classes | |||
|---|---|---|---|---|
| none | large | medium | small | |
| none | ||||
| green | ||||
| orange | ||||
| light gray | ||||
Action Buttons
These buttons are meant for 13px font and can only be up to 400px wide.
"button" tag
<button class="btn-action"><span>Test Button</span></button>
<button class="btn-action orange"><span>Test Orange Button</span></button>
<button class="btn-action gray"><span>Test Gray Button</span></button>
"a" tag
Test Button »
<a class="btn-action" href="link.cfm"><span>Test Gray Button</span></a>
Test Orange Button »
<a class="btn-action orange" href="link.cfm"><span>Test Gray Button</span></a>
Test Gray Button »
<a class="btn-action gray" href="link.cfm"><span>Test Gray Button</span></a>