Skip to content

Custom Background

The button has a default background 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
Background color in light mode --o_bg-light
Background color in light mode on hover --o_bg-light-hover
Background color in dark mode --o_bg-dark-hover
Background color in dark mode on hover --o_bg-dark-hover
Background color --o_bg

You can use any valid CSS value for the background, including gradients and images. The second example below shows the use of gradients as background and the third example shows the use of random images as background.

Custom background color site wide
.o-btn {
  --o_bg-light: forestgreen;
  --o_bg-light-hover: darkgreen;
  --o_bg-dark: chocolate;
  --o_bg-dark-hover: coral;
}
Custom background color modifier class
.o-btn-fancy {
  --o_bg-light: forestgreen;
  --o_bg-light-hover: darkgreen;
  --o_bg-dark: url(https://picsum.photos/100/50);
  --o_bg-dark-hover: coral;
}