I’ve gotta start by saying thanks to web.dev for their excellent article on using the prefers-reduced-motion media query - it was helpful in modifying the button wall so that site visitors’ system preferences are considered when it comes to displaying animated buttons. It’s simple. If your system preferences are set to reduce motion, you’ll see static buttons - if you have no preference set regarding motion, you’ll see the animated buttons.
I had recently tried a javascript approach to solving the same problem, which unfortunately, hosed the layout on mobile devices, so I abandoned it. I’m thankful to have found this simple CSS/HTML solution - it works and it’s mobile friendly. Yay!
