botão brilhante 2

Abrir no Editor Publique Seu Código

Recomendado

4 June 2025

Um Código de mamadoudiallo34204

8 May 2025

* {
      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;
      }
    }

botão brilhante 2

Recomendado

Um Código de mamadoudiallo34204

botão de digitalização

Um Código por shasshan7236

HTML

CSS

JS

Recomendado

Um Código de mamadoudiallo34204

botão de digitalização

Um Código por shasshan7236

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS