Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.jade

Created May 29, 2017
Embed
What would you like to do?
Push Me Button
.center
a.pushme
span.inner push me
//a.pushme
//span.inner me too
a(href="http://nathan.tokyo" target="_blank").sig NATHAN.TOKYO
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
$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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.