HTML

HTML floating Call Button

With the snippet bellow, you can add a floating call button to your website, to make it easier for your visitors to reach you on mobile.

    
<!DOCTYPE html> <head> <style> /* Add some basic styling for the button */ .call-button { position: fixed; bottom: 20px; right: 20px; background-color: #007c01; z-index: 50; font-size: 17px; color: #fff !important; padding: 10px 20px; border-radius: 50px; text-decoration: none; animation: shadow-pulse 1.5s infinite; } .call-button:hover { transform: scale(1.05); } @keyframes shadow-pulse { 0% { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); } 100% { box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); } } @keyframes shadow-pulse-big { 0% { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1); } 100% { box-shadow: 0 0 0 70px rgba(0, 0, 0, 0); } } </style> </head> <body> <a href="tel:+306854778954" class="call-button"><i class="fa-solid fa-phone"></i> +306854778954</a> </body>

Leave a Reply