bouton

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

22 November 2025

Effet de survol du bouton en verre liquide CSS

3 July 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kawaii Black Cat</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            overflow: hidden;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #fec, #f9d5bb);
            font-family: 'Comic Sans MS', cursive, sans-serif;
            transition: background 1s ease;
        }

article {
            --fur: #222;
            --fur-dark: #111;
            --skin: #ffb6c1;
            --eye-color: #4b0082;
            --paw-color: #fff;
            font-size: 0.6vmin;
            width: 80em;
            aspect-ratio: 1;
            position: relative;
            filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
            animation: float 3s ease-in-out infinite;
            
            *, *::before, *::after {
                position: absolute;
                box-sizing: border-box;
                transition: all 0.3s ease;
            }
            
            #alt {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }
            
            .shadow {
                width: 80%;
                height: 5%;
                background: rgba(0,0,0,0.1);
                border-radius: 50% / 0 0 100% 100%;
                top: 99%;
                left: 50%;
                transform: translateX(-50%);
                filter: blur(2px);
                animation: shadow-pulse 3s ease-in-out infinite;
            }
        
            .tail {
                width: 50%;
                height: 50%;
                border-radius: 50%;
                border: 7em solid transparent;
                border-top-color: var(--fur-dark);
                border-left-color: var(--fur-dark);
                clip-path: polygon(100% 0, 100% 100%, 0 30%, 0 0);
                top: 75%;
                left: 52%;
                transform-origin: left center;
                animation: tail-wag 5s ease-in-out infinite;
                
                &::before {
                    content: "";
                    width: 7em;
                    aspect-ratio: 1;
                    background: var(--fur-dark);
                    border-radius: 50%;
                    left: 81%;
                    top: -9%;
                }
            }
            
            .body {
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
                width: 35%;
                height: 40%;
                background: 
                    radial-gradient(100% 80% at 50% 0, var(--fur-dark) 50%, transparent 0),
                    var(--fur);
                border-radius: 100% / 200% 200% 20% 20%;
                animation: body-breathe 3s ease-in-out infinite;
                
                .leg {
                    width: 165%;
                    height:38%;
                    background: var(--fur);
                    bottom: 0;
                    left:50%;
                    transform: translateX(-50%) scaleY(-1);
                    border-radius: 8em 8em 100% 100% / 10em 10em 16em 16em;
                }
                
                .paw {
                    width: 35%;
                    height: 49%;
                    border: 0.75em solid var(--paw-color);
                    border-top: 0;
                    border-radius: 0 0 5em 5em;
                    border-bottom: 1em solid var(--paw-color);
                    top: 48%;
                    transform: rotate(-10deg);
                    left: 10%;
                    clip-path: polygon(0 20%, 100% 30%, 100% 100%, 0 100%);
                    
                    & + & {
                        right: 7%;
                        height: 50%;
                        left: auto;
                        transform: rotate(13deg) scaleX(-1);
                        clip-path: polygon(0 25%, 100% 15%, 100% 100%, 0 100%);
                    }
                }
            }
            
            .ear {
                width: 40%;
                aspect-ratio: 1;
                border: 4em solid var(--fur);
                border-radius: 5% 90% 10% 80%;
                background: var(--skin);
                animation: ear-twitch 8s ease-in-out infinite;
                
                & + & {
                    transform: scaleX(-1);
                    right: 0;
                    animation-delay: 0.5s;
                }
                
                &::before {
                    content: "";
                    position: absolute;
                    width: 50%;
                    height: 50%;
                    background: var(--skin);
                    border-radius: 50%;
                    top: 15%;
                    left: 15%;
                }
            }
            
            .head {
                width: 80%;
                aspect-ratio: 1.1;
                background: 
                    linear-gradient(rgba(0,0,0,0.3), transparent 50%),
                    var(--fur);
                left: 50%;
                transform: translateX(-50%);
                border-radius: 100% / 125% 125% 80% 75%;
                animation: head-tilt 10s ease-in-out infinite;
                
                .whisker {
                    width: 30%;
                    height: 30%;
                    border-radius: 50%;
                    border: 2em solid transparent;
                    border-top-color: var(--fur);
                    border-left-color: var(--fur);
                    clip-path: polygon(100% 0, 100% 100%, 0 30%, 0 0);
                    
                    &:nth-child(1) {
                        top: 70%;
                        transform: translateX(-65%);
                    }
                    &:nth-child(2) {
                        top: 80%;
                        transform: translateX(-40%) rotate(-20deg);
                    }
                    
                    &:nth-child(3) {
                        right: 0%;
                        top: 70%;
                        transform: translateX(65%) rotate(10deg);
                    }
                    &:nth-child(4) {
                        right: 0;
                        top: 80%;
                        transform: translateX(40%) rotate(24deg);
                    }
                }
                
                .nose {
                    width: 10%;
                    height: 7%;
                    background: var(--skin);
                    border-radius: 50%;
                    top: 78%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    
                    &::before {
                        content: "";
                        position: absolute;
                        width: 120%;
                        height: 50%;
                        background: var(--skin);
                        top: 80%;
                        left: 50%;
                        transform: translateX(-50%);
                        clip-path: polygon(0 0, 100% 0, 50% 100%);
                    }
                }
                
                .eye {
                    --pos: 25%;
                    --x1: 50%;
                    --x2: 42%;
                    width: 35%;
                    aspect-ratio: 1;
                    border-radius: 50%;
                    background: 
                        radial-gradient(50% 50% at var(--x1) 47%, #fff 25%, transparent 0),
                        radial-gradient(50% 50% at var(--x2) 65%, #fff 12%, transparent 0),
                        radial-gradient(circle at 60% 55%, var(--eye-color) 35%, transparent 0),
                        white;
                    top: 63%;
                    left: var(--pos);
                    transform: translate(-50%, -50%);
                    animation: blink 5s infinite;
                    
                    & + & {
                        --x1: 70%;
                        --x2: 78%;
                        left: calc(100% - var(--pos));
                        transform: translate(-50%, -50%) scaleX(-1);
                    }
                }
            }
            
            &:hover {
                .eye {
                    animation: squint 0.5s ease-in-out;
                }
                
                .tail {
                    animation: tail-wag-fast 0.5s ease-in-out infinite;
                }
            }
        }

/* Animations */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

@keyframes shadow-pulse {
            0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.1; }
            50% { transform: translateX(-50%) scale(0.9); opacity: 0.2; }
        }

@keyframes tail-wag {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(5deg); }
            75% { transform: rotate(-5deg); }
        }

@keyframes tail-wag-fast {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(10deg); }
        }

@keyframes body-breathe {
            0%, 100% { transform: translateX(-50%); }
            50% { transform: translateX(-50%) scaleY(1.02); }
        }

@keyframes ear-twitch {
            0%, 96%, 100% { transform: rotate(0deg); }
            98% { transform: rotate(-10deg); }
        }

@keyframes head-tilt {
            0%, 100% { transform: translateX(-50%) rotate(0deg); }
            25% { transform: translateX(-50%) rotate(2deg); }
            75% { transform: translateX(-50%) rotate(-2deg); }
        }

@keyframes blink {
            0%, 48%, 52%, 100% { height: 35%; }
            50% { height: 5%; }
        }

@keyframes squint {
            0%, 100% { height: 35%; }
            50% { height: 25%; }
        }

/* YouTube Link */
        #youtube {
            z-index: 2;
            display: block;
            width: 100px;
            height: 70px;
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: red;
            border-radius: 50% / 11%;
            transition: transform 0.5s;
            overflow: hidden;
            text-decoration: none;
        }

#youtube:hover,
        #youtube:focus {
            transform: scale(1.1);
            animation: pulse 1s infinite;
        }

#youtube::before {
            content: "";
            display: block;
            position: absolute;
            top: 7.5%;
            left: -6%;
            width: 112%;
            height: 85%;
            background: red;
            border-radius: 9% / 50%;
        }

#youtube::after {
            content: "";
            display: block;
            position: absolute;
            top: 20px;
            left: 40px;
            width: 45px;
            height: 30px;
            border: 15px solid transparent;
            box-sizing: border-box;
            border-left: 30px solid white;
        }

#youtube span {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            padding: 0 10px;
            box-sizing: border-box;
        }

@keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
        }

/* Responsive adjustments */
        @media (max-width: 768px) {
            article {
                width: 60vmin;
            }
            
            #youtube {
                width: 80px;
                height: 56px;
                bottom: 10px;
                right: 10px;
            }
            
            #youtube::after {
                top: 16px;
                left: 32px;
                width: 36px;
                height: 24px;
                border: 12px solid transparent;
                border-left: 24px solid white;
            }
        }
    </style>
</head>
<body>
    <article role="img" aria-labelledby="alt">
        <div id="alt">Cartoon of a black cat drawn in cute/kawaii style with animated tail and blinking eyes</div>
        <div class="shadow"></div>
        <div class="tail"></div>
        <div class="body">
            <div class="leg"></div>
            <div class="leg"></div>
            <div class="paw"></div>
            <div class="paw"></div>
        </div>
        <div class="ear"></div>
        <div class="ear"></div>
        <div class="head">
            <div class="whisker"></div>
            <div class="whisker"></div>
            <div class="whisker"></div>
            <div class="whisker"></div>
            <div class="eye"></div>
            <div class="eye"></div>
            <div class="nose"></div>
        </div>
    </article>

<a id="youtube" href="https://www.youtube.com/@yulismayagmur" target="_blank" aria-label="Watch how this component was coded">
        <span>Watch Tutorial</span>
    </a>
</body>
</html>

bouton

Recommandé

Effet de survol du bouton en verre liquide CSS

Bouton J'aime

Bouton de changement de thème

HTML

CSS

JS

Recommandé

Effet de survol du bouton en verre liquide CSS

Bouton J'aime

Bouton de changement de thème

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS