Skip to content

Custom Icon Color

The button has a default icon color of var(--o-accent-700) in dark mode, var(--o-accent-050) in light mode. This is the color used to style the icon if you use one. You can change this value by using the following CSS custom properties:

descriptioncustom property
Icon color in light mode --o_icon-color-light
Icon color in light mode on hover --o_icon-color-light-hover
Icon color in dark mode --o_icon-color-dark-hover
Icon color in dark mode on hover --o_icon-color-dark-hover
Icon color --o_icon-color
Custom icon color site wide
.o-btn {
  --o_icon-color-light: forestgreen;
  --o_icon-color-light-hover: darkgreen;
  --o_icon-color-dark: chocolate;
  --o_icon-color-dark-hover: coral;
}
Custom icon color modifier class
.o-btn-fancy {
  --o_icon-color-light: forestgreen;
  --o_icon-color-light-hover: darkgreen;
  --o_icon-color-dark: chocolate;
  --o_icon-color-dark-hover: coral;
}