WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Rainbow Hover Button HTML Example
568
sergioarmijo30
Open In Editor
Publish Your Code
Recommended
23 September 2025
CSS Loading Animation HTML Snippet
5 May 2025
Robux Tax Calculator HTML CSS
13 April 2024
HTML CSS Toggle Button
HTML
Copy
Sxrgxx
Registro
CSS
Copy
body{ display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #5f5f8c; margin: 0; } .rainbow-hover { font-size: 16px; font-weight: 700; color: #ff7576; background-color: #2B3044; border: none; outline: none; cursor: pointer; padding: 12px 24px; position: relative; line-height: 24px; border-radius: 9px; box-shadow: 0px 1px 2px #2B3044, 0px 4px 16px #2B3044; transform-style: preserve-3d; transform: scale(var(--s, 1)) perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); perspective: 600px; transition: transform 0.1s; } .sp { background: linear-gradient( 90deg, #866ee7, #ea60da, #ed8f57, #fbd41d, #2cca91 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; display: block; } .rainbow-hover:active { transition: 0.3s; transform: scale(0.93); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */