Responsive eCommerce template — BUY NOW!

Button Styles

We provide a wide range of button styles. Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Basic styling
 

Default button
<button class="btn">Default button</button> 

Primary button
<button class="btn btn-primary">Primary</button>

Button with icon
<button class="btn btn-primary">
<em class="icon-star"></em> Button
</button>

Button size options
 

Large size
<button class="btn btn-large btn-primary">
Button
</button>

Normal size
<button class="btn btn-primary">
Button
</button>

Small size
<button class="btn btn-small btn-primary">
Button
</button>

Mini size
<button class="btn btn-mini btn-primary">
Button
</button>

Button color options
 

Turquoise
<button class="btn btn-turquoise">Button</button>

Green sea
<button class="btn btn-greensea">Button</button>

Emerald
<button class="btn btn-emerland">Button</button>

Nephritis
<button class="btn btn-nephritis">Button</button>

Peter river
<button class="btn btn-peterriver">Button</button>

Belize hole
<button class="btn btn-belizehole">Button</button>

Amethyst
<button class="btn btn-amethyst">Button</button>

Wisteria
<button class="btn btn-wisteria">Button</button>

Wet asphalt
<button class="btn btn-wetasphalt">Button</button>

Midnight blue
<button class="btn btn-midnightblue">Button</button>

Sunflower
<button class="btn btn-sunflower">Button</button>

Orange
<button class="btn btn-orange">Button</button>

Carrot
<button class="btn btn-carrot">Button</button>

Pumpkin
<button class="btn btn-pumpkin">Button</button>

Alizarin
<button class="btn btn-alizarin">Button</button>

Pomegranate
<button class="btn btn-pomegranate">Button</button>