Buttons

This page lists all Buttons CSS custom properties and utility classes available in the OxyProps Framework

Base class

link Base class

Allways use this class to create a button.

Description	Utility class
The base class for any button	o-btn

Modifier classes

link Modifier classes

Use theses classes in addition to the base class apply specific styles.

Description	Utility class
Outline version	o-btn-outline
Disabled version	o-btn-disabled
Success version	o-btn-success
Warning version	o-btn-warning
Danger version	o-btn-danger
Brand responsive color	o-btn-brand
Accent responsive color	o-btn-accent
Links responsive color	o-btn-links
Visited responsive color	o-btn-visited
Black and white responsive color	o-btn-bw
White and black responsive color	o-btn-wb
Brand responsive gradient	o-btn-brand-gr
Accent responsive gradient	o-btn-accent-gr
Links responsive gradient	o-btn-links-gr
Visited responsive gradient	o-btn-visited-gr
Black and white responsive gradient	o-btn-bw-gr
White and black responsive gradient	o-btn-wb-gr

Button Props

link Button Props

Reassign values to these CSS variables to customize your buttons.

Description	CSS Variable
The button accent color in light mode	--o_accent-light
The button accent color in dark mode	--o_accent-dark
The button accent color	--o_accent
The button text color in light mode	--o_text-light
The button text color in dark mode	--o_text-dark
The button text color	--o_text
The button background color in light mode	--o_bg-light
The button background color in light mode on hover	--o_bg-light-hover
The button background color in dark mode	--o_bg-dark
The button background color in dark mode on hover	--o_bg-dark-hover
The button background color	--o_bg
The button gradient direction in light mode	--o_gradient-direction-light
The button gradient direction in dark mode	--o_gradient-direction-dark
The button gradient direction	--o_gradient-direction
The button input well color in light mode	--o_input-well-light
The button input well color in dark mode	--o_input-well-dark
The button input well color	--o_input-well
The button padding inline	--o_padding-inline
The button padding block	--o_padding-block
The button border size	--o_border-size
The button border radius	--o_border-radius
The button border color in light mode	--o_border-light
The button border color in dark mode	--o_border-dark
The button border color	--o_border
The button highlight size	--o_highlight-size
The button highlight size on hover	--o_highlight-size-hover
The button highlight color in light mode	--o_highlight-light
The button highlight color in dark mode	--o_highlight-dark
The button highlight color	--o_highlight
The button text shadow in light mode	--o_ink-shadow-light
The button text shadow in dark mode	--o_ink-shadow-dark
The button text shadow	--o_ink-shadow
The button icon size	--o_icon-size
The button icon color in light mode	--o_icon-color-light
The button icon color in dark mode	--o_icon-color-dark
The button icon color	--o_icon-color
The button shadow color in light mode	--o_shadow-color-light
The button shadow color in dark mode	--o_shadow-color-dark
The button shadow color	--o_shadow-color
The button shadow strength in light mode	--o_shadow-strength-light
The button shadow strength in dark mode	--o_shadow-strength-dark
The button shadow strength	--o_shadow-strength
The button shadow 1	--o_shadow-1
The button shadow 2	--o_shadow-2
The button shadow depth in light mode	--o_shadow-depth-light
The button shadow depth in dark mode	--o_shadow-depth-dark
The button shadow depth	--o_shadow-depth
The button text decoration	--o_text-decoration
The button text decoration on hover	--o_text-decoration-hover
The button text font weight	--o_text-font-weight
The button transition when prefers reduced motion is enabled	--o_transition-motion-reduce
The button transition when motion is OK	--o_transition-motion