Custom Highlight Color

The button has a default highlight color of hsl( var(--o-canvas-hue) var(--o-canvas-saturation) / 25%) in light mode, hsl(var(--o-shadow-color-dark) / 25%) in dark mode. You can change this value by using the following CSS custom properties:

description	custom property
Highlight color in light mode	--o_highlight-light
Highlight color in dark mode	--o_highlight-dark

buttonbuttonbutton

Custom highlight color site wide

.o-btn {
  --o_highlight-light: hsl(var(--o-indigo-500-hsl) / 50%);
  --o_highlight-dark: hsl(var(--o-indigo-300-hsl) / 50%);
}

Custom highlight color modifier class

.o-btn-fancy {
  --o_highlight-light: hsl(var(--o-purple-500-hsl) / 50%);
  --o_highlight-dark: hsl(var(--o-purple-300-hsl) / 50%);
}