Ejemplo de efectos al pasar el cursor sobre un botón HTML

696 Primes

Abrir en el editor Video Publica tu código

Ejemplo de efectos al pasar el cursor sobre un botón HTML

Recomendado

8 February 2025

Un código de bachir123

5 September 2025

Plantilla HTML de chatbot con IA | Código de interfaz de chat

14 September 2024

Carrusel de portafolios con controles deslizantes sincronizados

HTML

CSS

:root {
    --x1: rgb(205, 180, 219);
    --x2: rgb(255, 200, 221);
    --x3: rgb(255, 175, 204);
    --x4: rgb(189, 224, 254);
    --x5: rgb(162, 210, 255);
    --x6: black
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

body{
    background-color: var(--x1);
    align-items: center;
    justify-content: center;
    display: flex;
    min-height: 100vh;
}

.buttonBox{
    gap: 40px;
    display: flex;
}
button{
    cursor: pointer;
}
.button1 {
    width: 300px;
    height: 70px;
    background-color: var(--x3);
    font-size: 20px;
    border: none;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.button1::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75px;
    width: 60px;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.05) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    transition: none;
    opacity: 0;
}

.button1:hover::before {
    animation: shine-move 0.7s;
    opacity: 1;
}

.button2{
    width: 300px;
    height: 70px;
    background-color: var(--x4);
    font-size: 20px;
    border: none;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.button2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--x6);
    transition: width 0.35s cubic-bezier(.4,0,.2,1);
}

.button2:hover::after {
    width: 100%;
}

.button3{
    width: 300px;
    height: 70px;
    background: linear-gradient(270deg, var(--x1), var(--x2), var(--x3), var(--x4), var(--x5), var(--x1));
    background-size: 1400% 1400%;
    font-size: 20px;
    border: 2px solid transparent;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
    animation: rainbow-flow 4s linear infinite;
    color: var(--x6);
    transition: 
        filter 0.2s,
        border-color 0.35s cubic-bezier(.4,0,.2,1);
}
.button3:hover {
    border-color: #000;
}

@keyframes rainbow-flow {
    0% { background-position: 0% 50%;}
    100% { background-position: 100% 50%;}
}

@keyframes shine-move {
    0% {
        left: -75px;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        left: 120%;
        opacity: 1;
    }
    100% {
        left: 120%;
        opacity: 0;
    }
}

Recomendado

Un código de bachir123

Plantilla HTML de chatbot con IA | Código de interfaz de chat

Carrusel de portafolios con controles deslizantes sincronizados

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS