Home › Buttons

Button classes for sizes, style and color.

Button sizes

Preview Class
Button btn-sm
Button Default, no extra class
Button btn-lg
Button btn-xlg

Button styles

Preview Class
Button btn-primary
Button btn-primary btn-pill
Button btn-outline-primary btn-pill

Button colors

Preview Class Preview Class
Button btn-primary Button btn-outline-primary
Button btn-secondary Button btn-outline-secondary
Button btn-success Button btn-outline-success
Button btn-info Button btn-outline-info
Button btn-warning Button btn-outline-warning
Button btn-danger Button btn-outline-danger
Button btn-ghost Button btn-outline-ghost
Button btn-dark-ghost Button btn-outline-dark-ghost
Button btn-red Button btn-outline-red
Button btn-pink Button btn-outline-pink
Button btn-purple Button btn-outline-purple
Button btn-deep-purple Button btn-outline-deep-purple
Button btn-indigo Button btn-outline-indigo
Button btn-blue Button btn-outline-blue
Button btn-light-blue Button btn-outline-light-blue
Button btn-cyan Button btn-outline-cyan
Button btn-teal Button btn-outline-teal
Button btn-green Button btn-outline-green
Button btn-light-green Button btn-outline-light-green
Button btn-lime Button btn-outline-lime
Button btn-yellow Button btn-outline-yellow
Button btn-amber Button btn-outline-amber
Button btn-orange Button btn-outline-orange
Button btn-deep-orange Button btn-outline-deep-orange
Button btn-brown Button btn-outline-brown
Button btn-grey Button btn-outline-grey
Button btn-blue-grey Button btn-outline-blue-grey