शाइन एनिमेशन के साथ सीएसएस ग्लासमॉर्फिज्म बटन

अनुशंसित

4 December 2025

SVG और टेक्स्ट के साथ HTML एनिमेटेड बटन

28 January 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Water Drop Button</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,600;1,14..32,600&display=swap');

:root {
            --shine-url: url('https://i.imgur.com/NrNshvB.png');
        }

body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
        }

.container {
            background: var(--bg-url) center no-repeat;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 600px;
            width: 800px;
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.2);
        }

button {
            font-family: "Inter", sans-serif;
            font-weight: 600;
            color: #727272;
            font-size: 16px;
            display: flex;
            height: 54px;
            justify-content: center;
            align-items: center;
            border: none;
            padding: 0 2.5em; /* Increased padding for better proportions */
            position: relative;
            border-radius: 72px;
            cursor: pointer;
            
            /* Glassmorphism & Gradient */
            background: radial-gradient(98.54% 109.61% at 73.57% -7.45%, #CCC 0%, rgba(237, 237, 237,.6) 75%);
            backdrop-filter: blur(2px);
            
            /* Complex Inset Shadows for Depth */
            box-shadow: 
                4px -4px 9.6px 0px rgba(86, 86, 86, 0.08) inset, 
                2px -2px 9px 0px rgba(0, 0, 0, 0.16) inset, 
                1px -1px 9.4px 0px rgba(0, 0, 0, 0.20) inset, 
                -4px 5px 6.7px 1px rgba(0, 0, 0, 0.55), 
                -3px 4px 9.2px 0px rgba(0, 0, 0, 0.60) inset;

/* Animation Settings */
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-origin: center;
            user-select: none;
        }

/* The Shine/Reflection Element */
        button:after {
            content: "";
            display: block;
            width: 50px;
            height: 20px;
            background: var(--shine-url) center / contain no-repeat;
            position: absolute;
            top: 4px;
            right: 15px;
            opacity: 0.7;
            transition: all 0.5s ease;
            pointer-events: none;
            /* Constant subtle pulse */
            animation: shine-float 3s ease-in-out infinite;
        }

/* --- Hover State --- */
        button:hover {
            transform: scale(1.08) translateY(-3px);
            color: #555;
            box-shadow: 
                4px -4px 9.6px 0px rgba(86, 86, 86, 0.08) inset, 
                2px -2px 9px 0px rgba(0, 0, 0, 0.16) inset, 
                1px -1px 9.4px 0px rgba(0, 0, 0, 0.20) inset, 
                -8px 12px 18px 2px rgba(0, 0, 0, 0.4), /* Larger outer shadow */
                -3px 4px 9.2px 0px rgba(0, 0, 0, 0.60) inset;
        }

button:hover:after {
            opacity: 1;
            transform: translateX(-3px) scale(1.1);
        }

/* --- Active (Click) State --- */
        button:active {
            transform: scale(0.95) translateY(1px);
            transition: all 0.1s ease;
            box-shadow: 
                2px -2px 4px 0px rgba(86, 86, 86, 0.08) inset, 
                -2px 3px 5px 1px rgba(0, 0, 0, 0.5); /* Tuck shadow in */
        }

/* --- Keyframes --- */
        @keyframes shine-float {
            0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
            50% { transform: translateY(1px) scale(1.05); opacity: 0.9; }
        }
    </style>
</head>
<body>

<div class="container">
    <button>Button</button>
</div>

</body>
</html>

शाइन एनिमेशन के साथ सीएसएस ग्लासमॉर्फिज्म बटन

अनुशंसित

SVG और टेक्स्ट के साथ HTML एनिमेटेड बटन

बटन

सीएसएस पल्स लोडर

HTML

CSS

JS

अनुशंसित

SVG और टेक्स्ट के साथ HTML एनिमेटेड बटन

बटन

सीएसएस पल्स लोडर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS