CSS Glowing Button Hover Effects | Animated Glowing Button

HTML
<a href="#">Button</a>
CSS
*
{
    margin:0;
    padding:0;
    font-family:'Poppins',sans-serif;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#000;
}
a
{
    position:relative;
    display:inline-block;
    color:#0ef;
    font-size:1.5em;
    letter-spacing:.1em;
    text-decoration:none;
    text-transform:uppercase;
    padding:10px 30px;
    font-weight:500;
    transition:color 1s,box-shadow 0s;
}
:hover{
    transition-delay:0s,1s;
    color:#fff;
    box-shadow:
    0 0 10px #0ef,
    0 0 20px #0ef,
    0 0 60px #0ef,
    0 0 80px #0ef,
    0 0 160px #0ef;
}
a::before
{
    content:'';
    position:absolute;
    top:0;
    left:50%;
    width:50%;
    height:100%;
    background:#0ef;
    z-index:-1;
    transition:1s;
    transform:translateX(-50%) scale(0) rotate(360deg);
}
a:hover::before
{
    width:100%;
    transform:translateX(-50%) scale(1);
}

/* All credits to : https://www.youtube.com/watch?v=2kwsrBz05VQ */


Autor: Compositu

Publicado: 28/08/2023

Compartir Elemento Web

Donar a Compositu
Otras formas de ayudar
  • Compártelo en tus redes sociales.
  • Recomienda los elementos.
  • Regístrate Aquí
  • Deja tu comentario agradeciendo el aporte.

Descarga el código completo del Elemento Web y archivos necesarios (imágenes, librerias, plugins, frameword, etc)

Deja tu comentario