WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
botão brilhante 2
793
ByBy.inc
Abrir no Editor
Publique Seu Código
Recomendado
10 February 2025
Um código por bachir123
16 July 2025
botão
28 December 2024
Um código por mematixd3162
HTML
Copy
Glowing Btn 2
CSS
Copy
* { 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; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */