Push Me Button

HTML
<div class="center"> <a class="pushme"> <span class="inner">push me</span> </a> </div>
SCSS
$main: #384D9D; $back: #F6F3EB; .pushme { position: relative; font-weight: 700; background-color: $main; border-radius: 0.6em; display: inline-block; margin: 1em; .inner { display: inline-block; background-color: $back; border-radius: 0.6em; border: 0.3em solid $main; padding: 1em; cursor: pointer; text-transform: uppercase; user-select: none; transform: translate3d(0.6em, -0.6em, 0); transition: transform 240ms cubic-bezier(0.175, 0.885, 0.320, 1.275); transition-delay: 220ms; } &:active, &.click { .inner { transform: translate3d(0, 0, 0); transition: transform 120ms cubic-bezier(0.230, 1.000, 0.320, 1.000); } } } $sans: 'Open Sans', sans-serif; body { background: $back; font-family: $sans; color: $main; font-size: 5vh; } .center { position: absolute; top: 50%; left: 50%; width: 80vw; text-align: center; transform: translate3d(-50%,-50%,0); } .sig { position: fixed; bottom: 5px; right: 5px; text-decoration: none; font-size: 12px; font-weight: 800; font-family: sans-serif; color: rgba(0,0,0,0.4); }
JAVASCRIPT
Expand for more options Login