# Floating Call-to-Action Button After Scrolling

> Shows a floating button in the bottom corner once visitors have scrolled past the first screen, for "Book a call", "Get a quote" or "Shop now" links.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: cta, button, conversion
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-floating-cta-button/

## Code

```html
<a class="wpide-floating-cta" href="/contact/" hidden>Get a free quote</a>
<style>
.wpide-floating-cta{position:fixed;right:20px;bottom:20px;z-index:9980;padding:14px 22px;border-radius:999px;background:#111827;color:#fff!important;font-weight:600;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(16px);transition:opacity .25s ease,transform .25s ease;}
.wpide-floating-cta.is-visible{opacity:1;transform:none;}
.wpide-floating-cta:focus-visible{outline:3px solid #2271b1;outline-offset:3px;}
@media (prefers-reduced-motion:reduce){.wpide-floating-cta{transition:none;}}
@media (max-width:600px){.wpide-floating-cta{left:16px;right:16px;bottom:16px;text-align:center;}}
</style>
<script>
(function () {
    var cta = document.querySelector('.wpide-floating-cta');
    if (!cta || cta.pathname === window.location.pathname) { return; }
    cta.hidden = false;
    var update = function () { cta.classList.toggle('is-visible', window.pageYOffset > window.innerHeight * 0.8); };
    window.addEventListener('scroll', update, { passive: true });
    update();
})();
</script>
```

## Notes

Edit the link text and URL in the HTML. The button hides on the page it links to.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Floating Call-to-Action Button After Scrolling" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/