Buttons & Badges

Buttons

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

Sizes
Outlined
Width



Shadow

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

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:

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
← Previous Next β†’

Built with love in Ukraine πŸ‡ΊπŸ‡¦ by Kim Majali, EITO team, and contributors.