Buttons Modifiers

Outline

link Outline

The o-btn-outline modifier class turns the base button into an outline button.

buttonhover state

Brand

link Brand

The o-btn-brand modifier class adds your brand color to the button.

buttonhover state

Brand outline

link Brand outline

Combining the o-btn-outline and o-btn-brand modifier classes.

buttonhover state

Accent

link Accent

The o-btn-accent modifier class adds your accent color to the button.

buttonhover state

Accent outline

link Accent outline

Combining the o-btn-outline and o-btn-accent modifier classes.

buttonhover state

Links

link Links

The o-btn-links modifier class adds the link color to the button.

buttonhover state

Links outline

link Links outline

Combining the o-btn-outline and o-btn-links modifier classes.

buttonhover state

Visited

link Visited

The o-btn-visited modifier class adds the visited color to the button.

buttonhover state

Visited outline

link Visited outline

Combining the o-btn-outline and o-btn-visited modifier classes.

buttonhover state

BW (responsive black)

link BW (responsive black)

The o-btn-bw modifier class adds the BW responsive color to the button.
It will be black in light mode and white in dark mode.

buttonhover state

BW outline (responsive black)

link BW outline (responsive black)

Combining the o-btn-outline and o-btn-bw modifier classes.

buttonhover state

WB (responsive white)

link WB (responsive white)

The o-btn-wb modifier class adds the WB responsive color to the button.
It will be white in light mode and black in dark mode.

buttonhover state

WB outline (responsive white)

link WB outline (responsive white)

Combining the o-btn-outline and o-btn-wb modifier classes.

buttonhover state

Brand gradient

link Brand gradient

The o-btn-brand-gr modifier class adds the brand gradient to the button.

buttonhover state

Brand gradient outline

link Brand gradient outline

Combining the o-btn-outline and o-btn-brand-gr modifier classes.

buttonhover state

Accent gradient

link Accent gradient

The o-btn-accent-gr modifier class adds the accent gradient to the button.

buttonhover state

Accent gradient outline

link Accent gradient outline

Combining the o-btn-outline and o-btn-accent-gr modifier classes.

buttonhover state

Links gradient

link Links gradient

The o-btn-links-gr modifier class adds the links gradient to the button.

buttonhover state

Links gradient outline

link Links gradient outline

Combining the o-btn-outline and o-btn-links-gr modifier classes.

buttonhover state

Visited gradient

link Visited gradient

The o-btn-brand modifier class adds the visited gradient to the button.

buttonhover state

Visited gradient outline

link Visited gradient outline

Combining the o-btn-outline and o-btn-visited-gr modifier classes.

buttonhover state

Disabled

link Disabled

The o-btn-disabled modifier class adds the disabled style to the button.

buttonhover state

Success

link Success

The o-btn-success modifier class adds the success style to the button.

buttonhover state

Warning

link Warning

The o-btn-warning modifier class adds the warning state to the button.

buttonhover state

Danger

link Danger

Th o-btn-danger modifier class adds the danger state to the button.

buttonhover state