Botones CSS luminosos

1987 Andev.web

Abrir en el editor Publica tu código

Recomendado

18 October 2025

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

9 November 2025

Código CSS HTML JavaScript para reloj inteligente 3D

30 October 2025

Código HTML de la animación de carga de ojos CSS

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #151F28;
    flex-direction: column;
    gap: 50px; 
}

a{
    position: relative;
    background: #fff;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    font-weight: 400;
    padding: 10px 30px;
    transition: 0.5s;
}

a:hover{
    background: var(--clr);
    color: var(--clr);
    letter-spacing: 0.25em;
    box-shadow: 0 0 35px var(--clr);
}

a::before{
    content: '';
    position: absolute;
    inset: 2px;
    background: #151F28;
}

a span{
    position: relative;
    z-index: 1;
}

a i{
    position: absolute;
    inset: 0;
    display: block;
}

a i::before{
    content: '';
    position: absolute;
    top: 0;
    left: 80%;
    width: 10px;
    height: 4px;
    background: #151F28;
    transform: translateX(-50%) skewX(325deg);
    transition: 0.5s;
}

a:hover i::before{
    width: 20px;
    left: 20%;
}

a i::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 10px;
    height: 4px;
    background: #151F28;
    transform: translateX(-50%) skewX(325deg);
    transition: 0.5s;
}

a:hover i::after{
    width: 20px;
    left: 80%;
}

Recomendado

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

Código CSS HTML JavaScript para reloj inteligente 3D

Código HTML de la animación de carga de ojos CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS