bouton

460 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

1 August 2024

Boutons de réseaux sociaux animés

26 June 2024

Bouton de médias sociaux multiples

23 March 2025

Bouton Hover Glow

HTML

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

Boutons de réseaux sociaux animés

Bouton de médias sociaux multiples

Bouton Hover Glow

HTML

CSS

JS

Recommandé

Boutons de réseaux sociaux animés

Bouton de médias sociaux multiples

Bouton Hover Glow

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS