Buttons & Badges

Buttons

Add the element button or the class button apply the classes below

Default Button bg-color-2 bg-luxury bg-info bg-success bg-danger bg-warning bg-grey bga-color-1 bga-color-2 bga-luxury bga-info bga-success bga-danger bga-warning

Sizes

button-s button-m button-lg

Outlined

outline-color-1 outline-color-2 outline-color-dark outline-color-danger outline-color-info outline-color-success outline-luxury outline-warning

Width

button-w-25
button-w-50
button-w-100

Shadow

You can override the shadow shadow shadow-2 shadow-3 shadow-4 shadow-color shadow-2-color shadow-3-color shadow-4-color

Default shadow shadow-2 shadow-3 shadow-4

Hover

You can add hover classes to change the color on hover, try hovering on the classes below

• Color: color-1-hover color-2-hover success-hover info-hover danger-hover dark-hover white-hover color-gradient-hover
• Background Color: bg-color-1-hover bg-color-2-hover bg-black-hover bg-white-hover bg-dark-hover bg-danger-hover bg-success-hover bg-info-hover
• Color & Background Color: bga-color-1-hover bga-color-2-hover bga-black-hover bga-white-hover bga-dark-hover bga-danger-hover bga-success-hover bga-info-hover
• Shadow: You can override the shadow on Hover shadow shadow-2 shadow-3 shadow-4 shadow-color shadow-2-color shadow-3-color shadow-4-color

Examples:

bg-white-hover black-hover bga-color-1-hover white-hover bg-black-hover

Badges

Add a span element with the class badge apply the classes below

bg-color-1 bg-color-2 bg-grey bg-info bg-success bg-danger bg-warning bg-luxury bga-color-1 bga-color-2 bga-grey bga-info bga-success bga-danger bga-warning bga-luxury

outline-color-1 outline-color-2 outline-color-dark outline-color-success outline-color-info outline-color-danger outline-warning outline-luxury