Buttons

Standard Buttons Using the "Button" tag




<button>Default</button>

<button class="button-acid">Acid</button>

<button class="button-green">Green</button>

<button class="button-blue">Blue</button>

<button class="button-red">Red</button>

<button class="button-grey">Grey</button>

<button class="button-purple">Purple</button>

<button class="button-yellow">Yellow</button>



Standard Buttons Using an "Anchor" or "a" tag

Acid Blue Red Green Purple Grey

Acid
<a class="button button-acid button-lighttext" href="#">Acid</a>
Blue
<a class="button button-blue button-lighttext" href="#">Blue</a>
Red
<a class="button button-red button-lighttext" href="#">Red</a>
Green
<a class="button button-green" href="#">Green</a>
Purple
<a class="button button-purple button-lighttext" href="#">Purple</a>
Grey
<a class="button button-grey button-lighttext" href="#">Grey</a>



BIG Buttons Using an "Anchor" or "a" tag

You can make BIG buttons simply by adding "button-large" to the class of a particular buttons html.

Acid Blue Red Green Purple Grey
Acid
<a class="button button-acid button-lighttext button-large" href="#">Acid</a>
Blue
<a class="button button-blue button-lighttext button-large" href="#">Blue</a>
Red
<a class="button button-red button-lighttext button-large" href="#">Red</a>
Green
<a class="button button-green button-large" href="#">Green</a>
Purple
<a class="button button-purple button-lighttext button-large" href="#">Purple</a>
Grey
<a class="button button-grey button-lighttext button-large" href="#">Grey</a>



Full Width Buttons Using an "Anchor" or "a" tag

You can make Full Width buttons simply by adding "button-full" to the class of a particular buttons html.

<a class="button button-acid button-lighttext button-large button-full" href="#">This button will be the full width of the container</a>
This button will be the full width of the container
<a class="button button-blue button-lighttext button-large button-full" href="#">This button will be the full width of the container</a>
This button will be the full width of the container <a class="button button-red button-lighttext button-large button-full" href="#">This button will be the full width of the container</a>
This button will be the full width of the container <a class="button button-green button-lighttext button-large button-full" href="#">This button will be the full width of the container</a>
This button will be the full width of the container <a class="button button-purple button-lighttext button-large button-full" href="#">This button will be the full width of the container</a>
This button will be the full width of the container <a class="button button-grey button-lighttext button-large button-full" href="#">This button will be the full width of the container</a>
This button will be the full width of the container