Bouton CSS Glassmorphism avec animation brillante

1,006 codex

Ouvrir dans l'éditeur Publiez votre code

Bouton CSS Glassmorphism avec animation brillante

Recommandé

17 March 2026

Jeu d'obstacles 3D pour navigateur avec Three.js

26 September 2025

Animation de chargement CSS avec image d'arrière-plan

26 August 2024

Icônes sociales avec reflets

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