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.
Ripple Effect Buttons
Click on the buttons to see the ripple effect
Gradient Button
Add .bg-gradient-* class to button to get the gradient effect.
Outline Buttons
Use a classes .btn-outline-** to quickly create a bordered buttons.
Outline Rounded Button
Add .btn-rounded to default button to get rounded corners.
Soft Buttons
Use a classes .btn-soft-** to quickly create buttons with soft background.
Soft Rounded Button
Add .btn-rounded to default button to get rounded corners.
Buttons Labels
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>
Outline Rounded Button Labels
Add .btn-rounded to default button to get rounded corners.
Button Width
Create buttons with minimum width by adding add .width-xs, .width-sm, .width-md, .width-lg or .width-xl.
Button Size
Add .btn-lg or .btn-sm for additional sizes.
Button Disabled
Add the disabled attribute to <button> buttons.
Icons Buttons
Buttons with only icon
Icons Buttons
Buttons with text and icon
Block Buttons
Create block level buttons,with by adding add .btn-block.
Button Group Sizing
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.
Vertical Button Groups
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
Button Group
Wrap a series of buttons with .btn in .btn-group.
Please reload the page when you change the viewport size to view the responsive functionalities correctly
Copyright © 2021 XatoWeb, All rights reserved.
Crafted with extra
