Skip to content

Custom Depth Shadow

The button has a default depth shadow of 0 1px var(--o_border-light) in light mode and 0 1px var(--o_border-dark) in dark mode. This shadow adds a subtle line under the button giving a slight 3D effect. You can change this value by using the following CSS custom property:

The expected value is a CSS box-shadow value.

descriptioncustom property
Depth shadow in light mode --o_shadow-depth-light
Depth shadow in dark mode --o_shadow-depth-dark
Depth shadow --o_shadow-depth
Custom depth shadow site wide
.o-btn {
  --o_shadow-depth-light: 0 1px var(--o_border-light);
  --o_shadow-depth-dark: 0 1px var(--o_border-dark);
}
Custom depth shadow modifier class
.o-btn-fancy {
  --o_shadow-depth-light: 0 1px var(--o_border-light);
  --o_shadow-depth-dark: 0 1px var(--o_border-dark);
}