WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Esempio di codice del pulsante HTML
747
armyguy.jeff
Apri nell'Editor
Video
Pubblica il Tuo Codice
0
Consigliato
12 October 2025
Esempio HTML di mockup dell'interfaccia utente di Facebook
21 October 2024
Gioco di abbinamento di Halloween
29 September 2024
editore
HTML
Copy
Push
(maybe.)
CSS
Copy
body { width: 100%; height: 100vh; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; background-color: rgba(225, 225, 225, 1); font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; } button { all: unset; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; border-radius: 999vw; background-color: rgba(0, 0, 0, 0.75); box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25), 0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1); } button::after { content: ""; position: absolute; z-index: 0; width: calc(100% + 0.3em); height: calc(100% + 0.3em); top: -0.15em; left: -0.15em; border-radius: inherit; background: linear-gradient(-135deg, rgba(5, 5, 5, 0.5), transparent 20%, transparent 100%); filter: blur(0.0125em); opacity: 0.25; mix-blend-mode: multiply; } button .button-outer { position: relative; z-index: 1; border-radius: inherit; transition: box-shadow 300ms ease; will-change: box-shadow; box-shadow: 0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1), 0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5), 0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25); } button:hover .button-outer { box-shadow: 0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5), 0 0 0 0 rgba(5, 5, 5, 0.25); } .button-inner { --inset: 0.035em; position: relative; z-index: 1; border-radius: inherit; padding: 1em 1.5em; background-image: linear-gradient(135deg, rgba(230, 230, 230, 1), rgba(180, 180, 180, 1)); transition: box-shadow 300ms ease, clip-path 250ms ease, background-image 250ms ease, transform 250ms ease; will-change: box-shadow, clip-path, background-image, transform; overflow: clip; clip-path: inset(0 0 0 0 round 999vw); box-shadow: /* 1 */ 0 0 0 0 inset rgba(5, 5, 5, 0.1), /* 2 */ -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25), /* 3 */ 0 0 0 0 inset rgba(5, 5, 5, 0.1), /* 4 */ 0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25), /* 5 */ 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1), /* 6 */ 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), /* 7 */ -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25); } button:hover .button-inner { clip-path: inset(clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 999vw); box-shadow: /* 1 */ 0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75), /* 2 */ -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5), /* 3 */ 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5), /* 4 */ 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15), /* 5 */ 0 0 0 0 inset rgba(255, 255, 255, 1), /* 6 */ 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), /* 7 */ -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25); } button .button-inner span { position: relative; z-index: 4; font-family: "Inter", sans-serif; letter-spacing: -0.05em; font-weight: 500; color: rgba(0, 0, 0, 0); background-image: linear-gradient(135deg, rgba(25, 25, 25, 1), rgba(75, 75, 75, 1)); -webkit-background-clip: text; background-clip: text; transition: transform 250ms ease; display: block; will-change: transform; text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } button:hover .button-inner span { transform: scale(0.975); } button:active .button-inner { transform: scale(0.975); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */