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);
}
