botón

652 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

28 April 2024

Botón HTML animado

18 October 2025

Animación de interfaz de usuario de botón CSS Sxrgxx

26 June 2024

Botón de múltiples redes sociales

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>

Recomendado

Botón HTML animado

Animación de interfaz de usuario de botón CSS Sxrgxx

Botón de múltiples redes sociales

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS