WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botão de pairar
1480
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
11 July 2025
Menu de alternância CSS com ícones de fonte impressionantes
24 August 2025
Especificações do carro Accordion Slider HTML
20 April 2025
academia
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) */