Skip to content

Custom Highlight Size

The button has a default highlight size of 0rem, expanding to 0.5rem on hover. You can change this value by using the following CSS custom properties:

descriptioncustom property
Highlight size at rest --o_highlight-size-rest
Highlight size on hover --o_highlight-size-hover
Custom highlight size site wide
.o-btn {
  --o_highlight-size-rest: 0.5rem;
  --o_highlight-size-hover: 1rem;
}
Custom highlight size modifier class
.o-btn-fancy {
  --o_highlight-size-rest: 0.5rem;
  --o_highlight-size-hover: 1rem;
}