WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Bouton Hover Glow
904
securearray418
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
21 June 2024
Bouton d'autodestruction
12 September 2025
Effet d'animation CSS Circle Glow
19 May 2025
bouton dom
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) */