WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
बटन होवर चमक
916
securearray418
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
26 August 2024
आज ही जुड़ें-बटन
31 January 2025
बटन अधिक
9 September 2024
सीएसएस चमकते बटन
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) */