Aller au contenu

Custom Transition

Ce contenu n’est pas encore disponible dans votre langue.

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:

descriptioncustom property
Transition when prefers reduced motion is enabled --o_transition-motion-reduce
Transition when prefers reduced motion is disabled --o_transition-motion-ok
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);
}