# "Pause Animations" Button for Visitors

> Adds a floating button that lets any visitor stop animations, transitions and autoplaying videos on the site. The choice is remembered on their device.

- Type: Universal
- Runs: Site-wide footer
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: animation, wcag, button
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-pause-animations-button/

## Code

```php
<button type="button" class="wpide-motion-toggle" aria-pressed="false">Pause animations</button>
<style>
.wpide-motion-toggle{position:fixed;left:12px;bottom:12px;z-index:99990;padding:8px 14px;border:2px solid #fff;border-radius:6px;background:#1d2327;color:#fff;font-size:14px;cursor:pointer;}
.wpide-motion-toggle:focus-visible{outline:3px solid #72aee6;outline-offset:2px;}
html.wpide-no-motion *,html.wpide-no-motion *::before,html.wpide-no-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
</style>
<script>
(function () {
    var key = 'wpideNoMotion';
    var btn = document.querySelector('.wpide-motion-toggle');
    if (!btn) { return; }
    function apply(on) {
        document.documentElement.classList.toggle('wpide-no-motion', on);
        btn.setAttribute('aria-pressed', on ? 'true' : 'false');
        btn.textContent = on ? 'Play animations' : 'Pause animations';
        document.querySelectorAll('video').forEach(function (v) { if (on) { v.pause(); } });
    }
    var stored = false;
    try { stored = localStorage.getItem(key) === '1'; } catch (e) {}
    apply(stored);
    btn.addEventListener('click', function () {
        var on = btn.getAttribute('aria-pressed') !== 'true';
        apply(on);
        try { localStorage.setItem(key, on ? '1' : '0'); } catch (e) {}
    });
})();
</script>
```

## Notes

Change the bottom/left values in the CSS to move the button away from other floating elements such as chat widgets.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find ""Pause Animations" Button for Visitors" in its snippet library and add it in one click; or create a new Universal snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/