WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Exemplo de HTML do botão Rainbow Hover
40
sergioarmijo30
Abrir no Editor
Publique Seu Código
Recomendado
26 May 2025
Snake de 8 bits em desenvolvimento...
2 March 2025
Gerenciador de Tarefas
3 July 2025
Botão Curtir
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) */
