botón brillante 2

1,733 byby.createsite

Abrir en el editor Publica tu código

Recomendado

23 September 2023

Texto brillante al pasar el cursor

18 October 2025

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

28 May 2024

botón eliminar

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: black;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: 'Playfair Display', serif;
    }
    /* botão com box-shadow */
    .glowing-btn-2 {
      color: #f1f5f9;
      background: transparent;
      height: 10%;
      width: 15%;
      max-height: 200px;
      max-width: 300px;
      border-radius: 20px;
      border: solid 2px #8400ff;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      font-size: 1.2rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), 0 0 30px rgba(168, 85, 247, 0.2);
      transition: box-shadow 0.3s ease;
    }
    .glowing-btn-2:hover {
      box-shadow: 0 0 20px rgba(132, 0, 255, 0.6), 0 0 40px rgba(168, 85, 247, 0.3);
    }
    /* after com tamanho inicial de 0 e centralizado */
    .glowing-btn-2:active::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 20px;
      width: 0;
      height: 0;
      background: rgba(161, 60, 255, 0.15);
      transform: translate(-50%, -50%);
      animation: rippleEffect 2s ease-out forwards;
    }
    /*animacao para expandir o after começando de height 100% e indo para 200% */
    @keyframes rippleEffect {
      0% {
        width: 0;
        height: 100%;
        opacity: 1;
      }
      100% {
        width: 200%;
        height: 200%;
        opacity: 1;
      }
    }