Top Color:
Main Color:
Bottom Color:
Buttons
Button Sizes
  • Code Snip-it
  • How To Do It

<a id="PBSD" class="button-xlarge button button-flat white" href="#">X-Large Button</a>
<a id="PBSD" class="button-large button button-flat white" href="#" >Large Button</a>
<a id="PBSD" class="button-medium button button-flat white" href="#">Medium Button</a>
<a id="PBSD" class="button-small button button-flat white" href="#">Small Button</a>
<a id="PBSD" class="button-xsmall button button-flat white" href="#">X-Small Button</a>  

To add a button onto your site simply copy the code and place it into the 'HTML' section of your module, within the 'Edit Content'.

Example of the code:
'<a id="PBSD" class="button-xlarge button button-flat white" href="#">X-Large Button</a>'

There are a total of five different sizes of buttons, to change the size(s) of your button(s) look for the class within the code that specifies the size.

Example of the code to change for sizes:
'<a id="PBSD" class="button-xlarge button button-flat white" href="#">X-Large Button</a>'
button-xlarge can be changed to button-large, button-medium, button-small, button-xsmall

These classes can be added on to any current button class found on this page.

Button Corner Types
  • Code Snip-it
  • How To Do It

<a id="PBSD" class="button-medium button button-flat white" href="#" >Sharp Corners Button</a>
<a id="PBSD" class="button-medium button button-flat rounded-corner white" href="#" >Round Corners Button</a>

To add a button onto your site simply copy the code and place it into the 'HTML' section of your module, within the 'Edit Content'.

Example of the code:
'<a id="PBSD" class="button-medium button button-flat white" href="#" >Sharp Corners Button</a>'

There are a total of two different corner types of buttons, to change the corner(s) of your button(s) look for the class within the code that specifies the corners.

Example of the code to change for corners:
'<a id="PBSD" class="button-medium button button-flat rounded-corner white" href="#" >Round Corners Button</a> '
rounded-corner can be removed to get a rectangular look for your button

These classes can be added on to any current button class found on this page.

Button Style Types
  • Code Snip-it
  • How To Do It

<a id="PBSD" class="button-medium button button-flat white" href="#" >Flat Button</a>
<a id="PBSD" class="button-medium button button-raised white" href="#" > Raised Button</a>
<a id="PBSD" class="button-medium button button-gradient white" href="#" >Gradient Button</a>
<a id="PBSD" class="button-medium button button-flat rounded-corner white" href="#" >Flat Button</a>
<a id="PBSD" class="button-medium button button-raised rounded-corner white" href="#" >Raised Button</a>
<a id="PBSD" class="button-medium button button-gradient rounded-corner white" href="#" >Gradient Button</a>

To add a button onto your site simply copy the code and place it into the 'HTML' section of your module, within the 'Edit Content'.

Example of the code:
'<a id="PBSD" class="button-medium button button-flat white" href="#" >Flat Button</a>'

There are a total of three different style types of buttons, to change the style(s) of your button(s) look for the class within the code that specifies the style.

Example of the code to change for styles:
'<a id="PBSD" class="button-medium button button-raised white" href="#" > Raised Button</a> '
button-raised can be changed to button-flat,button-gradient

These classes can be added on to any current button class found on this page.

Button Colors
  • Code Snip-it
  • How To Do It

<a id="PBSD" class="button-medium button button-flat white" href="#" >White Button</a>
<a id="PBSD" class="button-medium button button-flat blue" href="#" >Blue Button</a>
<a id="PBSD" class="button-medium button button-flat green" href="#" >Green Button</a>
<a id="PBSD" class="button-medium button button-flat red" href="#" >Red Button</a>
<a id="PBSD" class="button-medium button button-flat orange" href="#" >Orange Button</a>
<a id="PBSD" class="button-medium button button-flat yellow" href="#" >Yellow Button</a>
<a id="PBSD" class="button-medium button button-flat purple" href="#" >Purple Button</a>     

To add a button onto your site simply copy the code and place it into the 'HTML' section of your module, within the 'Edit Content'.

Example of the code:
'<a id="PBSD" class="button-medium button button-flat blue" href="#" >Blue Button</a>'

There are a total of seven different colors of buttons, to change the color(s) of your button(s) look for the class within the code that specifies the colors.

Example of the code to change for colors:
'<a id="PBSD" class="button-medium button button-flat blue" href="#" >Blue Button</a>'
blue can be changed to white, green, red, orange, yellow, purple

These classes can be added on to any current button class found on this page.