Custom Transition

The button has a default transition of none for users who prefer reduced motion, and box-shadow 145ms var(--o-ease-3), outline-offset 145ms var(--o-ease-3) when motion is OK. You can change this value by using the following CSS custom property:

description	custom property
Transition when prefers reduced motion is enabled	--o_transition-motion-reduce
Transition when prefers reduced motion is disabled	--o_transition-motion-ok

buttonbuttonbuttonbutton

Custom transition site wide

.o-btn {
  --o_transition-motion-reduce: none;
  --o_transition-motion-ok: box-shadow 145ms var(--o-ease-3), outline-offset 145ms var(--o-ease-3);
}

Custom transition modifier class

.o-btn-fancy {
  --o_transition-motion-reduce: none;
  --o_transition-motion-ok: box-shadow 145ms var(--o-ease-3), outline-offset 145ms var(--o-ease-3);
}