Botón CSS Glassmorphism con animación de brillo

754 codex

Abrir en el editor Publica tu código

Botón CSS Glassmorphism con animación de brillo

Recomendado

25 November 2025

Minero de oro

31 January 2026

Cargador de juegos HTML5 de People Playground

5 November 2025

Fragmento de código HTML para interruptor de alternancia

HTML

<!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>

CSS