WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Bouton de survol
1270
ledoc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
25 May 2025
icône de chargement 3
20 April 2025
salle de sport
19 March 2025
Lampes d'étude
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) */