WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Pulsante HTML successivo con freccia SVG
33
sergioarmijo30
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
15 October 2025
Codice HTML JavaScript del gioco di indovinelli
7 November 2024
Menu verticale con passaggio del mouse
17 July 2025
Arte poligonale SVG: codice grafico vettoriale
HTML
Copy
Sxrgxx
NEXT
CSS
Copy
body{ display: flex; justify-content: center; align-items: center; height: 100vh; background: #121212; } .button { --main-size: 2em; --color-text: #ffffff; --color-background: #4a2dcb91; --color-background-hover: #ff2e7b; --color-outline: #350cd983; --color-shadow: #00000040; cursor: pointer; display: flex; justify-content: center; align-items: center; text-decoration: none; border: none; border-radius: calc(var(--main-size) * 100); padding: 0.33em 0 0.33em 0.66em; font-family: "Poppins", sans-serif; font-weight: 600; font-size: var(--main-size); color: var(--color-text); background: var(--color-background); box-shadow: 0 0 0.2em 0 var(--color-background); transition: 1s; } .button:active { transform: scale(0.95); } .button:hover { outline: 0.1em solid transparent; outline-offset: 0.2em; box-shadow: 0 0 1em 0 var(--color-background); animation: ripple 1s linear infinite, colorize 1s infinite; transition: 0.5s; } .button span { margin-right: 0.3em; transition: 0.5s; } .button:hover span { text-shadow: 5px 5px 5px var(--color-shadow); } .button:active span { text-shadow: none; } .button svg { height: 0.8em; fill: var(--color-text); margin-right: -0.16em; position: relative; transition: 0.5s; } .button:hover svg { margin-right: 0.66em; transition: 0.5s; filter: drop-shadow(5px 5px 2.5px var(--color-shadow)); } .button:active svg { filter: none; } .button svg polygon:nth-child(1) { transition: 0.4s; transform: translateX(-60%); } .button svg polygon:nth-child(2) { transition: 0.5s; transform: translateX(-30%); } .button:hover svg polygon:nth-child(1) { transform: translateX(0%); animation: opacity 1s infinite 0.6s; } .button:hover svg polygon:nth-child(2) { transform: translateX(0%); animation: opacity 1s infinite 0.4s; } .button:hover svg polygon:nth-child(3) { animation: opacity 1s infinite 0.2s; } @keyframes opacity { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes colorize { 0% { background: var(--color-background); } 50% { background: var(--color-background-hover); } 100% { background: var(--color-background); } } @keyframes ripple { 0% { outline: 0em solid transparent; outline-offset: -0.1em; } 50% { outline: 0.2em solid var(--color-outline); outline-offset: 0.2em; } 100% { outline: 0.4em solid transparent; outline-offset: 0.4em; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */