Skip to content

Custom Border Color

The button has a default border color of var(--o-surface-3) in dark mode, var(--o-surface-1) in light mode. You can change this value by using the following CSS custom properties:

descriptioncustom property
Border color in light mode --o_border-light
Border color in light mode on hover --o_border-light-hover
Border color in dark mode --o_border-dark
Border color in dark mode on hover --o_border-dark-hover
Border color --o_border
Border color on hover --o_border-hover
Fancy button site wide
.o-btn {
  --o_border-light: var(--o-accent);
  --o_border-dark: var(--o-visited);
  --o_border-light-hover: var(--o-visited);
  --o_border-dark-hover: var(--o-accent);
}
Fancy button modifier class
.o-btn-fancy {
  --o_border-light: var(--o-accent);
  --o_border-dark: var(--o-visited);
  --o_border-light-hover: var(--o-visited);
  --o_border-dark-hover: var(--o-accent);
}