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 btn-default">Default button</button> 
Primary button
<button class="btn btn-primary">Primary</button>
Button with icon
<button class="btn btn-primary">
<i class="fa fa-star"></i> Button
</button>

Button size options


Large size
<button class="btn btn-lg btn-primary">Button</button>
Normal size
<button class="btn btn-primary">Button</button>
Small size
<button class="btn btn-sm btn-primary">Button</button>
Mini size
<button class="btn btn-xs 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>