Atom Button (Hover)

HTML
<div class="container"> <div class="btn"> <span>Atom</span> <div class="dot"></div> </div> <h1>☝ Hover on the button ☝</h1> </div>
CSS
:root { --bg: #3C465C; --primary: #78FFCD; --solid: #fff; --btn-w: 10em; --dot-w: calc(var(--btn-w)*.2); --tr-X: calc(var(--btn-w) - var(--btn-w)*.2); } * {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);} }
JAVASCRIPT
Expand for more options Login