WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
glowing button 2
1091
byby.createsite
Open In Editor
Publish Your Code
Recommended
18 October 2025
CSS Button UI Sxrgxx Animation
30 January 2025
Buttons Gradient Hover
22 July 2025
Samsung Galaxy S24 Ultra Landing Page
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) */