Floating Call Widget

Floating Call Widget - Pure CSS + HTML + JS

This tailwind example is contributed by Sayista Yazdani, on 10-Oct-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action Widget

Author Sayista Yazdani

Tailwind v3.4 56

Fork Fullscreen

<style>
  .custom-call-widget {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(calc(100% - 75px));
    z-index: 99999;
    transition: transform 0.3s ease-in-out;
    user-select: none;
    font-family: sans-serif;
  }
  .custom-call-btn {
    display: flex;
    align-items: center;
    background-color: #0f7137;
    color: #ffffff !important;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    padding: 8px 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-right: none;
    white-space: nowrap;
  }
  .custom-call-btn:hover {
    background-color: #0c592b;
  }
  .call-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
  }
  .call-text-box {
    background-color: #ffffff;
    color: #0f7137;
    border-radius: 20px;
    padding: 6px 14px;
    font-weight: bold;
    font-size: 13px;
    margin-left: 10px;
    display: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
  }
  .arrow-symbol {
    font-size: 12px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.8);
  }
</style>

function collapseWidget() {
        const widget = document.getElementById('callWidget');
        const widgetText = document.getElementById('widgetText');
        const arrowIcon = document.getElementById('arrowIcon');
        if (widget && widgetText && arrowIcon) {
            widget.style.transform = 'translateY(-50%) translateX(calc(100% - 75px))';
            widgetText.style.display = 'none';
            arrowIcon.innerHTML = '&lt;&lt;';
        }
    }

document.addEventListener("DOMContentLoaded", () => {
        expandWidget();
        setTimeout(() => { collapseWidget(); }, 2000);
    });
</script>

Related Examples

Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Anonymous

3 years ago

11.5k
Animated Gradient Button Component
Button component with smooth hover effects and glass-morphism design. Features expanding gradient animation, rotating icon, and responsive layout. Perfect for call-to-action buttons, landing pages, and web applications. Easy copy-paste Tailwind CSS code ready for integration.

Homayoun

1 year ago

1.3k
Call to action
Call to action section. find it makecomponents.com

makecomponents

2 years ago

2.7k
Hero section with a gradient background
With text overlay, and a call-to-action button

Anonymous

3 years ago

21.2k
Call to Action with Background image

Monica D.

2 years ago

2.8k
Basic CTA
Simple and straightforward call to action section

Dipti narayan

3 years ago

8.5k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Abdul Baset Bappy

1 year ago

1.5k
pages / slides

MD Fardous Alom

1 year ago

2.3k
Call to action (CTA) section
Modern and clean CTA section

Bunny

3 years ago

12.5k
CTA banner
Capture the attention of the user with full-width CTA Section

Anonymous

2 years ago

5.1k
Minimal CTA section

Laurits

3 years ago

10.1k
CTA section with floating icos as background

EliteAI Tools

1 year ago

1.7k