Buttons
Default Buttons
Use the button classes on an <a>
, <button>
, or <input>
element.
Rounded Button
Add .btn-rounded
to default button to get rounded corners.
Outline Buttons
Use a classes .btn-custom
to quickly create a outline.
Outline Rounded Buttons
Add .btn-custom .btn-rounded
to get clean rounded button.
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>
Button-Width
Create buttons with minimum width by adding add .w-xs
, .w-sm
, .w-md
or .w-lg
.
Button-Sizes
Add .btn-lg
, .btn-sm
, or .btn-xs
for additional sizes.
Button-Disabled
Add the disabled
attribute to <button>
buttons.
Icon Button
Icon only button.
Block Button
Create block level buttons,with by adding add .btn-block
.
Dropdown
Turn a button into a dropdown toggle with some basic markup changes.
Split button dropdown
Turn a button into a dropdown toggle with some basic markup changes.
Dropup
Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup
to the parent.
File upload buttons
Use the button classes on an <a>
, <button>
, or <input>
element.
Social Buttons with label
Use class .btn-@yoursocial
to the parent.
Social buttons
Use class .btn-@yoursocial
to the parent.