Botón CSS Glassmorphism con animación de brillo

411 codex

Abrir en el editor Publica tu código

Botón CSS Glassmorphism con animación de brillo

Recomendado

29 April 2025

Sitio web con IA (NO FUNCIONA)

8 February 2025

Botón de escape

28 August 2025

Formulario de inicio de sesión/registro (turco)

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>

Recomendado

Sitio web con IA (NO FUNCIONA)

Botón de escape

Formulario de inicio de sesión/registro (turco)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS