WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Rainbow Hover Button HTML Example
35
sergioarmijo30
Open In Editor
Publish Your Code
Recommended
28 August 2024
Images Navigation Hover Effect
18 September 2024
Login button
25 August 2025
Movie Website HTML Template
HTML
Copy
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sxrgxx</title> <link rel="stylesheet" href="styles.css"> </head> <body> <button data-label="Register" class="rainbow-hover"> <span class="sp">Registro</span> </button> </body> </html>
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) */
