Aller au contenu

Buttons

Ce contenu n’est pas encore disponible dans votre langue.

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.

DescriptionUtility 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.

DescriptionUtility 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.

DescriptionCSS 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