botão brilhante 2

Abrir no Editor Publique Seu Código

Recomendado

22 July 2025

Página inicial do Samsung Galaxy S24 Ultra

16 January 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

Página inicial do Samsung Galaxy S24 Ultra

Um código por mematixd3162

Botão Hover Glow

HTML

CSS

JS

Recomendado

Página inicial do Samsung Galaxy S24 Ultra

Um código por mematixd3162

Botão Hover Glow

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS