Skip to content

Custom Ink Shadow

The button has a default ink shadow (text shadow) of 0 1px 0 var(--o_border-light) in light mode, 0 1px 0 var(--o_border-dark) in dark mode. You can change this value by using the following CSS custom properties:

descriptioncustom property
Ink shadow in light mode --o_ink-shadow-light
Ink shadow in dark mode --o_ink-shadow-dark-hover
Ink shadow --o_ink-shadow
Custom ink shadow site wide
.o-btn {
  --o_ink-shadow-light: 0 4px 0 darkgray;
  --o_ink-shadow-dark: 0 0 15px var(--o-brand);
}
Custom ink shadow modifier class
.o-btn-fancy {
  --o_ink-shadow-light: 0 4px 0 darkgray;
  --o_ink-shadow-dark: 0 0 15px var(--o-brand);
}