When creating your content you may wonder “How do I add a button?”, this is something we commonly get asked.
Adding buttons is totally possible, and can be added through a CMS snippet or directly into the source code of a page.
If building CMS snippets or editing source code, a general understanding of HTML will help you accomplish this task easier.
Adding these in is as simple as copy and paste into the section of page/snippet markup where you want it displayed, then you will just change the button title and button link.
See below for button previews and code for the different button types.
Click to View Primary Button Preview and Codes
Square button code without hyperlinks:
<button class="button button--large button--primary">Primary Button</button>
Square button code with hyperlinks (replace # with the page URL):
<a href="#"><button class="button button--large button--primary">Primary Button</button></a>
Round button code without hyperlinks:
<button class="button button--large button--round button--primary">Primary Round Button</button>
Round button code with hyperlinks (replace # with the page URL):
<a href="#"><button class="button button--large button--round button--primary">Primary Round Button</button></a>
Click to View Secondary Button Preview and Codes
Square button code without hyperlinks:
<button class="button button--large button--secondary">Secondary Button</button>
Square button code with hyperlinks (replace # with the page URL):
<a href="#"><button class="button button--large button--secondary">Secondary Button</button></a>
Round button code without hyperlinks:
<button class="button button--large button--round button--secondary">Secondary Round Button</button>
Round button code with hyperlinks (replace # with the page URL):
<a href="#"><button class="button button--large button--round button--secondary">Secondary Round Button</button></a>
Click to View Green Button Preview and Codes
Square button code without hyperlinks:
<button class="button button--large button--success">Green Button</button>
Square button code with hyperlinks (replace # with the page URL):
<a href="#"><button class="button button--large button--success">Green Button</button></a>
Round button code without hyperlinks:
<button class="button button--large button--round button--success">Green Round Button</button>
Round button code with hyperlinks (replace # with the page URL):
<a href="#"><button class="button button--large button--round button--success">Green Round Button</button></a>
Click to View Blue Button Preview and Codes
Square button code without hyperlinks:
<button class="button button--large button--blue">Blue Button</button>
Square button code with hyperlinks (replace # with the page URL):
<a href="#"><button class="button button--large button--blue">Blue Button</button></a>
Round button code without hyperlinks:
<button class="button button--large button--round button--blue">Blue Round Button</button>
Round button code with hyperlinks (replace # with the page URL):
<a href="#"><button class="button button--large button--round button--blue">Blue Round Button</button></a>
Click to View Ghost Button Preview and Codes
Square button code without hyperlinks:
<button class="button button--large button--ghost">Ghost Button</button>
Square button code with hyperlinks (replace # with the page URL):
<a href="#"><button class="button button--large button--ghost">Ghost Button</button></a>
Round button code without hyperlinks:
<button class="button button--large button--round button--ghost">Ghost Round Button</button>
Round button code with hyperlinks (replace # with the page URL):
<a href="#"><button class="button button--large button--round button--ghost">Ghost Round Button</button></a>
Click to View Small Button Preview and Codes
Small button code without hyperlinks:
<button class="button button--small button--primary">Small Button</button>
Small button code with hyperlinks (replace # with the page URL):
<a href="#"><button class="button button--small button--primary">Small Button</button></a>
