WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Pulsante passante
1474
ledoc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
18 October 2025
Pulsante HTML con effetto hover (WEBLEB)
28 January 2025
pulsante
7 August 2025
Nascondi Div al clic del pulsante: avvia animazione
HTML
Copy
Button
☝ Hover on the button By Ledoc ☝
CSS
Copy
:root { --bg: #2E3B4E; --primary: #FF6F61; --solid: #FFFFFF; --btn-w: 10em; --dot-w: calc(var(--btn-w) * 0.2); --tr-X: calc(var(--btn-w) - var(--dot-w)); } * { box-sizing: border-box; } *:before, *:after { box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; flex-flow: wrap; background: var(--bg); font-size: 20px; font-family: 'Titillium Web', sans-serif; } h1 { color: var(--solid); font-size: 2.5rem; margin-top: 6rem; } .btn { position: relative; margin: 0 auto; width: var(--btn-w); color: var(--primary); border: .15em solid var(--primary); border-radius: 5em; text-transform: uppercase; text-align: center; font-size: 1.3em; line-height: 2em; cursor: pointer; } .dot { content: ''; position: absolute; top: 0; width: var(--dot-w); height: 100%; border-radius: 100%; transition: all 300ms ease; display: none; } .dot:after { content: ''; position: absolute; left: calc(50% - .4em); top: -.4em; height: .8em; width: .8em; background: var(--primary); border-radius: 1em; border: .25em solid var(--solid); box-shadow: 0 0 .7em var(--solid), 0 0 2em var(--primary); } .btn:hover .dot, .btn:focus .dot { animation: atom 2s infinite linear; display: block; } @keyframes atom { 0% {transform: translateX(0) rotate(0);} 30% {transform: translateX(var(--tr-X)) rotate(0);} 50% {transform: translateX(var(--tr-X)) rotate(180deg);} 80% {transform: translateX(0) rotate(180deg);} 100% {transform: translateX(0) rotate(360deg);} }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */