Standard Buttons

Small Example

HTML:
<a href="#" class="button small black">Black</a>

Medium Example

HTML:
<a href="#" class="button medium black">Black</a>

Large Example

HTML:
<a href="#" class="button large black">Black</a>

CSS3 Buttons: Gradients, Transition, Box & Text Shadow

Small Example

HTML:
<a href="#" class="button small gradient black">Black</a>

Medium Example

HTML:
<a href="#" class="button medium gradient black">Black</a>

Large Example

HTML:
<a href="#" class="button large gradient black">Black</a>

Adding Rounded Corners

If you want the buttons to have rounded corners you have a choice of 4 pre-defined sizes: 5, 8, 10 & 12px. To use the individual sizes all you have to do is simply add the class name to the class element e.g. rnd5, rnd8, rnd10, rnd12.

Standard Button:

Normal:
Black
<a href="#" class="button large black">Black</a>
With Rounded Corners:
Black
<a href="#" class="button large black rnd8">Black</a>

With Gradient:

Normal:
Black
<a href="#" class="button large gradient black">Black</a>
With Rounded Corners:
Black
<a href="#" class="button large gradient black rnd8">Black</a>

If you don't wish to add a further class everytime you create a button, you can use the "custom.css" file and overwrite the button class by adding (simply copy and paste) the following:

.button{-moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;}

Simply change the "12px" to your default size e.g. 5px, 8px or 10px.