الصفحة الرئيسية
Coding

How to Add Floating Buy Now Button

ABEFILM
Floating Buy Now Button

Introduction

Want to add a modern floating "Buy Now" button to your page? This guide shows how to create a stylish, expandable button that sticks to the right center of the screen. It expands when clicked, auto-hides after 5 seconds, and closes when the user clicks outside of it — all using simple HTML, CSS, and JavaScript.

Features & Functions

# Features & Functions
1 Floats on the side of the screen
2 Expands on click
3 Opens a link when clicked again
4 Auto-collapses after 5 seconds
5 Closes when clicking outside
6 Uses Bootstrap Icons

Demo

Just click or tap the floating button at the right-center of the screen with a "Shopping Cart icon". It will expand to show the label, and when clicked again, it will open the purchase link. The button also auto-collapses after 5 seconds or when you click outside. Includes a subtle pulse glow animation and clean Bootstrap Icon styling.

Instructions


  1. Copy the HTML code and paste it where you want the button to appear.
  2. Add the CSS styles into your stylesheet or inside a <style> tag.
  3. Insert the JavaScript at the bottom of your page before the closing </body> tag.
  4. Customize the button text, link, or colors as needed.

Code (HTML / CSS / JS)

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" />

<button id="buyThemeBtn" aria-label="Buy This Theme">
  <i class="bi bi-cart4"></i>
  <span class="label">Buy This Theme</span>
</button>

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(22,201,59,.6); }
  70% { box-shadow: 0 0 0 14px rgba(22,201,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,201,59,0); }
}
#buyThemeBtn {
  position: fixed;
  right: -2px;
  transform: translateY(-50%);
  z-index: 9999;
  background: #16c93b;
  color: #fff;
  border: none;
  border-radius: 4px 0 0 4px;
  width: 40px;
  padding: 4px 4px 4px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font: bold 14px/1 sans-serif;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.3s ease;
  animation: pulse 2.3s ease-out infinite;
}
#buyThemeBtn i { font-size: 20px; flex-shrink: 0; }
#buyThemeBtn .label {
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
}
#buyThemeBtn.open { width: 150px; }
#buyThemeBtn.open .label { opacity: 1; }
#buyThemeBtn:hover { filter: brightness(0.95); }

const btn = document.getElementById('buyThemeBtn');
const link = 'https://take.app/abefilm';
let hideTimer;
let outsideListener;

function lockPosition() {
  const mid = window.innerHeight / 2;
  btn.style.top = mid + 'px';
}
lockPosition();
window.addEventListener('orientationchange', () =>
  setTimeout(lockPosition, 300)
);

function collapse() {
  btn.classList.remove('open');
  clearTimeout(hideTimer);
  document.removeEventListener('click', outsideListener, true);
}

btn.addEventListener('click', (e) => {
  if (btn.classList.contains('open')) {
    window.open(link, '_blank');
  } else {
    btn.classList.add('open');
    clearTimeout(hideTimer);
    hideTimer = setTimeout(collapse, 5000);
    outsideListener = (evt) => {
      if (!btn.contains(evt.target)) collapse();
    };
    document.addEventListener('click', outsideListener, true);
  }
  e.stopPropagation();
});

Conclusion

This floating "Buy Now" button is perfect for landing pages, product showcases, or demo sites. It's sleek, attention-grabbing, and user-friendly. Customize the label, icon, and destination to fit your branding — and enhance your conversions effortlessly!

Note!
Customize the button text, link, or colors as needed.

Buy This Theme Button

إرسال تعليق