WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
rainbow button
2729
pan4o
Open In Editor
Publish Your Code
Recommended
10 July 2025
CSS Animated Button Hover Effect
9 September 2024
CSS Glowing Buttons
26 June 2024
Multiple social media button
HTML
Copy
Rainbow button
Click me!
CSS
Copy
html, body { display: flex; justify-content: center; align-items: center; background-color: #161616; overflow: hidden; /* transform: scale(1.5); */ } /* button */ .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; } /* glow */ .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;} } /* hover */ .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) */