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.

Dropdown link Dropdown link

Button Group

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

Please reload the page to view the responsive functionalities

Copyright © 2021 XatoWeb, All rights reserved.

Crafted with extra