WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botão de pairar
1478
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
18 May 2025
Um código de Mete
30 November 2024
Arte de texto
19 October 2024
Portfólio do desenvolvedor HTML V2
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) */