botón

199 kevekıbhack

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

6 May 2024

Botón de desplazamiento de neón

23 November 2024

Botones de redes sociales al pasar el mouse

30 January 2025

Botones con gradiente al pasar el mouse

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>

botón

Recomendado

Botón de desplazamiento de neón

Botones de redes sociales al pasar el mouse

Botones con gradiente al pasar el mouse

HTML

CSS

JS

Recomendado

Botón de desplazamiento de neón

Botones de redes sociales al pasar el mouse

Botones con gradiente al pasar el mouse

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS