Buttons

Default Buttons

Use the button classes on an <a>, <button>, or <input> element.

Default Rounded Button

Add .btn-rounded to default button to get rounded corners.

Outline Buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-*-outline ones to remove all background images and colors on any button.

Outline Rounded Button

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-*-outline .btn-rounded ones to remove all background images and colors on any button.

Button-Width

Create buttons with minimum width by adding add .width-xs, .width-sm, .width-md, .width-lg & .width-xl.

Button-Sizes

Add .btn-lg, .btn-sm for additional sizes.

Button Labels

Use the button classes on an <a>, <button>, or <input> element. And put <span> with class .btn-label and any icon inside it. If you want to put icon on right side then add class .btn-label-right in <span>


Button Labels Rounded

Use the button classes on an <a>, <button>, or <input> element. And put <span> with class .btn-label and any icon inside it. If you want to put icon on right side then add class .btn-label-right in <span>


Icon Button

Icon only button.


Block Button

Create block level buttons,with by adding add .btn-block.

Button group

Wrap a series of buttons with .btn in .btn-group.



Button plugin

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Social Buttons with label

Use class .btn-@yoursocial to the parent.

Social buttons

Use class .btn-@yoursocial to the parent.


Theme Customizer

Download Now
 Choose Demos