WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botão Hover Glow
1425
securearray418
Abrir no Editor
Video
Publique Seu Código
0
Recomendado
19 March 2025
Botão de confete
27 November 2024
Botão Hover
18 October 2025
Animação Sxrgxx da interface do usuário do botão CSS
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) */