Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Admin / Untitled Snippet
Duplicate Snippet

Embed Snippet on Your Site

Untitled Snippet

Mohsin Khan
<10
Code Preview
Comments
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Call Button</title>
    <style>
        /* Mobile Sticky Button */
        #mobile_button {
            height: 60px;
            background: linear-gradient(90deg, #BD1362 0%, #FFFFFF 100%);
            z-index: 99999;
            position: fixed;
            bottom: 10px;
            left: 50%;
            width: 90%;
            transform: translateX(-50%);
            text-align: center;
            border-radius: 30px;
            transition: transform 0.3s ease-in-out;
            animation: bounce 1.5s ease-in-out infinite, slideLight 3s ease-in-out infinite;
            background-size: 200% 100%;
            box-shadow: none; /* Removed the box-shadow */
        }
        /* Call Button Text */
        #mobile_button a {
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            font-size: 13px;
            font-weight: bold;
            text-decoration: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: inline-block;
            text-align: center;
        }
        /* Hover Effect */
        #mobile_button:hover {
            transform: translateX(-50%) scale(1.1);
        }
        /* Click Effect */
        #mobile_button:active {
            transform: translateX(-50%) scale(0.95);
        }
        /* Bounce Animation */
        @keyframes bounce {
            0%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            50% {
                transform: translateX(-50%) translateY(-10px);
            }
        }
        /* Sliding Light Animation */
        @keyframes slideLight {
            0% {
                background-position: 200% 0;
            }
            50% {
                background-position: 0% 0;
            }
            100% {
                background-position: 200% 0;
            }
        }
    </style>
</head>
<body>
    <div id="mobile_button">
        <a href="tel:18005714050">Godrej Customer Care<br> 18005714050</a>
    </div>
</body>
</html>
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet