Please wait...

Components Button

Default button setting
Link
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input" />
<input class="btn btn-default" type="submit" value="Submit" />
<button type="button" class="btn btn-link">Link</button>
Button size
<button class="btn btn-default btn-sm" type="submit">Small</button>
<button class="btn btn-default" type="submit">Medium</button>
<button class="btn btn-default btn-lg" type="submit">Large</button>
<button class="btn btn-default btn-xlg" type="submit">Xlarge</button>
Button color suggestions
<button class="btn btn-default" type="submit">Default</button>
<button class="btn btn-primary" type="submit">Primary</button>
<button class="btn btn-buttercup" type="submit">Buttercup</button>
<button class="btn btn-jaffa" type="submit">Jaffa</button>
<button class="btn btn-mandy" type="submit">Mandy</button>
<button class="btn btn-fiord" type="submit">Fiord</button>
<button class="btn btn-picton" type="submit">Picton</button>
<button class="btn btn-mantis" type="submit">Mantis</button>
<button class="btn btn-turquoise" type="submit">Turquoise</button>
<button class="btn btn-gold" type="submit">Gold</button>
<button class="btn btn-kimberly" type="submit">Kimberly</button>
<button class="btn btn-christine" type="submit">Christine</button>
<button class="btn btn-neptune" type="submit">Neptune</button>
<button class="btn btn-amaranth" type="submit">Amaranth</button>
<button class="btn btn-sunflower" type="submit">Sunflower</button>
<button class="btn btn-viridian" type="submit">Viridian</button>
<button class="btn btn-cinnabar" type="submit">Cinnabar</button>
<button class="btn btn-cadillac" type="submit">Cadillac</button>
<button class="btn btn-eastern" type="submit">Eastern</button>
<button class="btn btn-golden" type="submit">Golden</button>
<button class="btn btn-wedgewood" type="submit">Wedgewood</button>
<button class="btn btn-thunderbird" type="submit">Thunderbird</button>
<button class="btn btn-apple" type="submit">Apple</button>
<button class="btn btn-potters" type="submit">Potters</button>
<button class="btn btn-viola" type="submit">Viola</button>
<button class="btn btn-azure" type="submit">Azure</button>
<button class="btn btn-stiletto" type="submit">Stiletto</button>
<button class="btn btn-meadow" type="submit">Meadow</button>
<button class="btn btn-tussock" type="submit">Tussock</button>
<button class="btn btn-serria" type="submit">Serria</button>
<button class="btn btn-steel" type="submit">Steel</button>
<button class="btn btn-brandy" type="submit">Brandy</button>
<button class="btn btn-spruce" type="submit">Spruce</button>
<button class="btn btn-saddle" type="submit">Saddle</button>
<button class="btn btn-mahogany" type="submit">Mahogany</button>
<button class="btn btn-froly" type="submit">Froly</button>
<button class="btn btn-lemon" type="submit">Lemon</button>
<button class="btn btn-berry" type="submit">Berry</button>
<button class="btn btn-crimson" type="submit">Crimson</button>
<button class="btn btn-deyork" type="submit">Deyork</button>
<button class="btn btn-sunshade" type="submit">Sunshade</button>
<button class="btn btn-chestnut" type="submit">Chestnut</button>
<button class="btn btn-paradiso" type="submit">Paradiso</button>
<button class="btn btn-lavender" type="submit">Lavender</button>
<button class="btn btn-olive" type="submit">Olive</button>
<button class="btn btn-nutmeg" type="submit">Nutmeg</button>
<button class="btn btn-yonder" type="submit">Yonder</button>
<button class="btn btn-nandor" type="submit">Nandor</button>
<button class="btn btn-desert" type="submit">Desert</button>
<button class="btn btn-downy" type="submit">Downy</button>
Radius style
<button class="btn btn-default btn-sm btn-radius" type="submit">Small</button>
<button class="btn btn-primary btn-radius" type="submit">Medium</button>
<button class="btn btn-buttercup btn-lg btn-radius" type="submit">Large</button>
<button class="btn btn-jaffa btn-xlg btn-radius" type="submit">Xlarge</button>
Rectangle style
<button class="btn btn-default btn-sm btn-rectangle" type="submit">Small</button>
<button class="btn btn-mandy btn-rectangle" type="submit">Medium</button>
<button class="btn btn-mantis btn-lg btn-rectangle" type="submit">Large</button>
<button class="btn btn-picton btn-xlg btn-rectangle" type="submit">Xlarge</button>
Stroke radius style
<button class="btn btn-default btn-sm btn-radius btn-strok" type="submit">Small</button>
<button class="btn btn-primary btn-radius btn-strok" type="submit">Medium</button>
<button class="btn btn-buttercup btn-lg btn-radius btn-strok" type="submit">Large</button>
<button class="btn btn-jaffa btn-xlg btn-radius btn-strok" type="submit">Xlarge</button>
Stroke rectangle style
<button class="btn btn-default btn-sm btn-rectangle btn-stroke" type="submit">Small</button>
<button class="btn btn-mandy btn-rectangle btn-stroke" type="submit">Medium</button>
<button class="btn btn-mantis btn-lg btn-rectangle btn-stroke" type="submit">Large</button>
<button class="btn btn-picton btn-xlg btn-rectangle btn-stroke" type="submit">Xlarge</button>
3D radius style
<button class="btn btn-default btn-sm btn-radius btn-3d" type="submit">Small</button>
<button class="btn btn-primary btn-radius btn-3d" type="submit">Medium</button>
<button class="btn btn-buttercup btn-lg btn-radius btn-3d" type="submit">Large</button>
<button class="btn btn-jaffa btn-xlg btn-radius btn-3d" type="submit">Xlarge</button>
3D rectangle style
<button class="btn btn-default btn-sm btn-rectangle btn-3d" type="submit">Small</button>
<button class="btn btn-mandy btn-rectangle btn-3d" type="submit">Medium</button>
<button class="btn btn-mantis btn-lg btn-rectangle btn-3d" type="submit">Large</button>
<button class="btn btn-picton btn-xlg btn-rectangle btn-3d" type="submit">Xlarge</button>
3D stroke radius style
<button class="btn btn-default btn-sm btn-radius btn-stroke btn-3d" type="submit">Small</button>
<button class="btn btn-primary btn-radius btn-stroke btn-3d" type="submit">Medium</button>
<button class="btn btn-buttercup btn-lg btn-radius btn-stroke btn-3d" type="submit">Large</button>
<button class="btn btn-jaffa btn-xlg btn-radius btn-stroke btn-3d" type="submit">Xlarge</button>
3D stroke rectangle style
<button class="btn btn-default btn-sm btn-rectangle btn-stroke btn-3d" type="submit">Small</button>
<button class="btn btn-mandy btn-rectangle btn-stroke btn-3d" type="submit">Medium</button>
<button class="btn btn-mantis btn-lg btn-rectangle btn-stroke btn-3d" type="submit">Large</button>
<button class="btn btn-picton btn-xlg btn-rectangle btn-stroke btn-3d" type="submit">Xlarge</button>
Button with left icon
<button class="btn btn-default btn-sm btn-icon" type="submit"><i class="fa fa-check"></i> Small</button>
<button class="btn btn-primary btn-icon" type="submit"><i class="fa fa-cogs"></i> Medium</button>
<button class="btn btn-buttercup btn-lg btn-icon" type="submit"><i class="fa fa-rocket"></i> Large</button>
<button class="btn btn-jaffa btn-xlg btn-icon" type="submit"><i class="fa fa-flask"></i> Xlarge</button>
<button class="btn btn-jaffa btn-xlg btn-stroke btn-icon" type="submit"><i class="fa fa-flask"></i> Xlarge</button>
<button class="btn btn-buttercup btn-lg btn-stroke btn-icon" type="submit"><i class="fa fa-rocket"></i> Large</button>
<button class="btn btn-primary btn-stroke btn-icon" type="submit"><i class="fa fa-cogs"></i> Medium</button>
<button class="btn btn-default btn-sm btn-stroke btn-icon" type="submit"><i class="fa fa-check"></i> Small</button>
Button with right icon
<button class="btn btn-default btn-sm btn-icon-right" type="submit">Small <i class="fa fa-comments"></i></button>
<button class="btn btn-primary btn-icon-right" type="submit">Medium <i class="fa fa-shopping-cart"></i></button>
<button class="btn btn-buttercup btn-lg btn-icon-right" type="submit">Large <i class="fa fa-paper-plane"></i></button>
<button class="btn btn-jaffa btn-xlg btn-icon-right" type="submit">Xlarge <i class="fa fa-trophy"></i></button>
<button class="btn btn-jaffa btn-xlg btn-stroke btn-icon-right" type="submit">Xlarge <i class="fa fa-comments"></i></button>
<button class="btn btn-buttercup btn-lg btn-stroke btn-icon-right" type="submit">Large  <i class="fa fa-shopping-cart"></i></button>
<button class="btn btn-primary btn-stroke btn-icon-right" type="submit">Medium <i class="fa fa-paper-plane"></i></button>
<button class="btn btn-default btn-sm btn-stroke btn-icon-right" type="submit">Small <i class="fa fa-trophy"></i></button>
Left icon button with divider
<button class="btn btn-default btn-sm btn-3d btn-icon icon-divider" type="submit"><i class="fa fa-check"></i>Divider icon small</button>
<button class="btn btn-primary btn-3d btn-icon icon-divider" type="submit"><i class="fa fa-cogs"></i>Divider icon medium</button>
<button class="btn btn-buttercup btn-lg btn-3d btn-icon icon-divider" type="submit"><i class="fa fa-rocket"></i>Divider icon large</button>
<button class="btn btn-jaffa btn-xlg btn-3d btn-icon icon-divider" type="submit"><i class="fa fa-flask"></i> Divider icon xlarge</button>
<button class="btn btn-jaffa btn-xlg btn-stroke btn-3d btn-icon icon-divider" type="submit"><i class="fa fa-flask"></i> Divider icon xlarge</button>
<button class="btn btn-buttercup btn-lg btn-stroke btn-3d btn-icon icon-divider" type="submit"><i class="fa fa-rocket"></i>Divider icon large</button>
<button class="btn btn-primary btn-stroke btn-3d btn-icon icon-divider" type="submit"><i class="fa fa-cogs"></i>Divider icon medium</button>
<button class="btn btn-default btn-sm btn-stroke btn-3d btn-icon icon-divider" type="submit"><i class="fa fa-check"></i>Divider icon small</button>
Right icon button with divider
<button class="btn btn-default btn-sm btn-3d btn-icon-right icon-divider" type="submit">Divider icon small <i class="fa fa-comments"></i></button>
<button class="btn btn-primary btn-3d btn-icon-right icon-divider" type="submit">Divider icon medium <i class="fa fa-phone"></i></button>
<button class="btn btn-buttercup btn-lg btn-3d btn-icon-right icon-divider" type="submit">Divider icon large <i class="fa fa-paper-plane"></i></button>
<button class="btn btn-jaffa btn-xlg btn-3d btn-icon-right icon-divider" type="submit">Divider icon xlarge <i class="fa fa-trophy"></i></button>
<button class="btn btn-jaffa btn-xlg btn-stroke btn-3d btn-icon-right icon-divider" type="submit">Divider icon xlarge <i class="fa fa-trophy"></i></button>
<button class="btn btn-buttercup btn-lg btn-stroke btn-3d btn-icon-right icon-divider" type="submit">Divider icon large <i class="fa fa-paper-plane"></i></button>
<button class="btn btn-primary btn-stroke btn-3d btn-icon-right icon-divider" type="submit">Divider icon medium <i class="fa fa-phone"></i></button>
<button class="btn btn-default btn-sm btn-stroke btn-3d btn-icon-right icon-divider" type="submit">Divider icon small <i class="fa fa-comments"></i></button>