prefers-reduced-motion

prefers-reduced-motion.scss

@media (prefers-reduced-motion: no-preference) {
  button {
    transition: all 300ms ease-in-out;
    border: 2px solid rgba(255,255,255, 0.4);
    transform: scale(1);
    
    &:hover {
      transform: scale(1.1);  
      border: 2px solid rgba(255,255,255, 1);
    }
  }
}

/* Replace it with a safer effect when prefers-reduced-motion returns true */
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
    &:hover {
      border: 2px solid white;
    }
  }
}