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