WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!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>
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); }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!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>
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); }
/* Replace with your JS Code (Leave empty if not needed) */