Home
Arturo Lizana
Floating Action Button

Floating Action Button

This component displays a fixed, floating contact button panel positioned at the bottom-right corner of the screen. It provides users with quick access to key communication channels including WhatsApp, Email, and Instagram. Each icon is styled with vibrant, platform-specific colors and includes subtle hover animations for an interactive user experience.

Ideal for improving accessibility and encouraging user engagement, especially on mobile devices.

This tailwind example is contributed by Arturo Lizana, on 06-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner,Social media links,

Call to Action Social media buttons

Author Arturo Lizana

912

3

Fork Fullscreen

<div class="fixed right-5 bottom-10 pb-4 flex flex-col gap-3">

<a
    href="https://api.whatsapp.com/send?phone=337776655"
    target="_blank"
    rel="noopener noreferrer"
    class="flex items-center justify-center w-12 h-12 xs:w-10 xs:h-10 bg-green-500 text-white rounded-full shadow-lg transition-transform hover:scale-110"
  >
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
      <path d="M20.52 3.48A11.92 11.92 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.11.55 4.12 1.6 5.91L0 24l6.27-1.62A11.93 11.93 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.19-1.24-6.18-3.48-8.52zM12 22a9.93 9.93 0 0 1-5.1-1.39l-.36-.21-3.72.96.99-3.63-.24-.37A9.93 9.93 0 0 1 2 12c0-5.52 4.48-10 10-10s10 4.48 10 10-4.48 10-10 10zm5.27-7.05c-.29-.14-1.72-.84-1.98-.94-.27-.1-.47-.14-.66.14-.2.29-.76.94-.93 1.13-.17.2-.34.22-.63.07-.29-.14-1.24-.46-2.37-1.47a8.77 8.77 0 0 1-1.63-2.03c-.17-.29-.02-.45.13-.59.13-.13.29-.34.43-.51.14-.17.2-.29.29-.48.1-.2.05-.37-.02-.51-.07-.14-.66-1.59-.9-2.18-.24-.57-.49-.49-.66-.5h-.56c-.2 0-.52.07-.8.37-.29.29-1.04 1.02-1.04 2.48 0 1.45 1.06 2.85 1.2 3.05.14.2 2.1 3.21 5.09 4.5.71.31 1.26.5 1.69.64.71.22 1.36.19 1.87.12.57-.08 1.72-.7 1.96-1.37.24-.67.24-1.24.17-1.37-.07-.14-.26-.2-.55-.34z" />
    </svg>
  </a>

<a
    href="mailto:contat@exaple.com"
    class="flex items-center justify-center w-12 h-12 xs:w-10 xs:h-10 bg-blue-600 text-white rounded-full shadow-lg transition-transform hover:scale-110"
  >
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
      <path d="M20 4H4C2.897 4 2 4.897 2 6v12c0 1.103.897 2 2 2h16c1.104 0 2-.897 2-2V6c0-1.103-.896-2-2-2zm0 2v.511l-8 5.333-8-5.333V6h16zM4 18V8.489l8 5.333 8-5.333V18H4z" />
    </svg>
  </a>

<a
    href="https://www.instagram.com"
    target="_blank"
    rel="noopener noreferrer"
    class="flex items-center justify-center w-12 h-12 xs:w-10 xs:h-10 bg-gradient-to-r from-pink-500 to-yellow-500 text-white rounded-full shadow-lg transition-transform hover:scale-110"
  >
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 2.2c3.2 0 3.584.012 4.85.07 1.17.054 1.97.24 2.43.403a4.92 4.92 0 0 1 1.78 1.045 4.92 4.92 0 0 1 1.045 1.78c.163.46.35 1.26.403 2.43.058 1.267.07 1.65.07 4.85s-.012 3.584-.07 4.85c-.054 1.17-.24 1.97-.403 2.43a4.92 4.92 0 0 1-1.045 1.78 4.92 4.92 0 0 1-1.78 1.045c-.46.163-1.26.35-2.43.403-1.267.058-1.65.07-4.85.07s-3.584-.012-4.85-.07c-1.17-.054-1.97-.24-2.43-.403a4.92 4.92 0 0 1-1.78-1.045 4.92 4.92 0 0 1-1.045-1.78c-.163-.46-.35-1.26-.403-2.43C2.212 15.784 2.2 15.4 2.2 12s.012-3.584.07-4.85c.054-1.17.24-1.97.403-2.43A4.92 4.92 0 0 1 3.718 2.94 4.92 4.92 0 0 1 5.497 1.895c.46-.163 1.26-.35 2.43-.403C8.416 1.812 8.8 1.8 12 1.8zm0 1.8c-3.14 0-3.5.012-4.73.068-1.02.046-1.575.22-1.94.364a3.12 3.12 0 0 0-1.136.74 3.12 3.12 0 0 0-.74 1.136c-.144.365-.318.92-.364 1.94-.056 1.23-.068 1.59-.068 4.73s.012 3.5.068 4.73c.046 1.02.22 1.575.364 1.94.16.405.404.77.74 1.136.366.336.73.58 1.136.74.365.144.92.318 1.94.364 1.23.056 1.59.068 4.73.068s3.5-.012 4.73-.068c1.02-.046 1.575-.22 1.94-.364a3.12 3.12 0 0 0 1.136-.74 3.12 3.12 0 0 0 .74-1.136c.144-.365.318-.92.364-1.94.056-1.23.068-1.59.068-4.73s-.012-3.5-.068-4.73c-.046-1.02-.22-1.575-.364-1.94a3.12 3.12 0 0 0-.74-1.136 3.12 3.12 0 0 0-1.136-.74c-.365-.144-.92-.318-1.94-.364C15.5 4.012 15.14 4 12 4zm0 3.8a4.2 4.2 0 1 1 0 8.4 4.2 4.2 0 0 1 0-8.4zm0 1.8a2.4 2.4 0 1 0 0 4.8 2.4 2.4 0 0 0 0-4.8zm5.6-2.2a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
    </svg>
  </a>
</div>

Related Examples

Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

5 months ago

628
App store & Google playstore buttons

Author:
Dika Rahman

1 year ago

2.1k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

11.1k
Sign up with google button

Author:
Laurits

2 years ago

40.6k
Survey CTA

Author:
JaxStone

2 years ago

10.4k
Responsive CTA
Tailwind CTA card

Author:
Dika Rahman

1 year ago

2.1k
Call to action component
Start your free 7-day trial Call to action button

Author:
S. Patel

2 years ago

7.8k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

2 years ago

9k
Fancy call to action

Author:
Leon Bachmann

2 years ago

10.3k
Simple CTA card

Author:
Santos78

2 years ago

13.3k
Call to action
CTA

Author:
inbarajan P

1 year ago

1.5k
Contact us Form with Responsive

Author:
KULDEEP

3 months ago

317

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12