WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botão Hover Glow
1251
securearray418
Abrir no Editor
Publique Seu Código
Recomendado
19 March 2025
Botão de confete
28 January 2025
botão
HTML
Copy
Daniel Estevez
Hover Me!
CSS
Copy
html, body { display: flex; justify-content: center; align-items: center; background-color: #161616; overflow: hidden; transform: scale(1.5); } .btn { margin: 100px; padding: 15px 40px; border: none; outline: none; color: #FFF; cursor: pointer; position: relative; z-index: 0; border-radius: 12px; } .btn::after { content: ""; z-index: -1; position: absolute; width: 100%; height: 100%; background-color: #333; left: 0; top: 0; border-radius: 10px; } .btn::before { content: ""; background: linear-gradient( 45deg, #FF0000, #FF7300, #FFFB00, #48FF00, #00FFD5, #002BFF, #FF00C8, #FF0000 ); position: absolute; top: -2px; left: -2px; background-size: 600%; z-index: -1; width: calc(100% + 4px); height: calc(100% + 4px); filter: blur(8px); animation: glowing 20s linear infinite; transition: opacity .3s ease-in-out; border-radius: 10px; opacity: 0; } @keyframes glowing { 0% {background-position: 0 0;} 50% {background-position: 400% 0;} 100% {background-position: 0 0;} } .btn:hover::before { opacity: 1; } .btn:active:after { background: transparent; } .btn:active { color: #000; font-weight: bold; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */