Resplandor al pasar el cursor sobre el botón

1,843 securearray418

Abrir en el editor Publica tu código

Resplandor al pasar el cursor sobre el botón

Recomendado

16 July 2025

Escenario CSS con luces y escaleras

11 May 2025

Feliz día de la madre

19 November 2025

Pantalla de carga animada con puntos en CSS

HTML

CSS

html, body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #161616;
    overflow: hidden;
    transform: scale(1.5);
  }

.btn {
    margin: 100px;
    padding: 15px 40px;
    border: none;
    outline: none;
    color: #FFF;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 12px;
  }
  .btn::after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #333;
    left: 0;
    top: 0;
    border-radius: 10px;
  }

.btn::before {
    content: "";
    background: linear-gradient(
      45deg,
      #FF0000, #FF7300, #FFFB00, #48FF00,
      #00FFD5, #002BFF, #FF00C8, #FF0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px);
    height:  calc(100% + 4px);
    filter: blur(8px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
    opacity: 0;
  }
  
  @keyframes glowing {
    0% {background-position: 0 0;}
    50% {background-position: 400% 0;}
    100% {background-position: 0 0;}
  }

.btn:hover::before {
    opacity: 1;
  }
  
  .btn:active:after {
    background: transparent;
  }
  
  .btn:active {
    color: #000;
    font-weight: bold;
  }