Color States
Checkout color states of all buttons on popover to buttons
Basic Buttons
Use the button classes on an <a>
, <button>
, or <input>
element.
Rounded buttons
Add .btn-round
to default button to get rounded corners.
Square Buttons
Add .btn-square
to default button to get square corners.
Skew Buttons
Add .btn-skew
to default button to get skew Buttons.
inner border
Use Class .btn-out
inside button to make inner solid Border Button.
Use Class .btn-out-dashed
inside button to make inner dashed Border Button.
Use Class .btn-out-dotted
inside button to make inner solid dotted Button.
Gradient
Vertical gradient
Use Class .btn-grd-*
inside button to make gradient Button.
Horizontal gradient
Use Class .hor-grd .btn-grd-*
inside button to make horizontal gradient Button.
Matrialized
Use Class .btn-mat
inside button to make matrialized Button.
Buttons With Icon
Use <i class="icofont icofont-star">
inside button to add icon.
Border Buttons
Use Class btn-outline-*
inside button to make Border Button.
Buttons Dropdown
Buttons with split dropdown with icon
Icon Button
Use <i class="icofont icofont-star">
inside button to add icon.
Icon Border Buttons
Use Class btn-outline-*
inside button to make Border Button.
Group Buttons
Use btn-xlg, btn-lg, btn-md, btn-sm, btn-mini
inside class to use different size button.