WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ejemplo HTML de botón flotante de arcoíris
39
sergioarmijo30
Abrir en el editor
Publica tu código
Recomendado
16 June 2025
Un código de daniel_pindou_7
29 July 2024
horario de eventos
23 April 2025
Un código de Metehan
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) */
