Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Button Explore
button.explore Explore
span.icon-right
span.icon-right.after
a(class='signature', href='http://vanderlanth.io' target='_blank') Made with ♥ by vanderlanth
// this code is such a mess right now ! If you look at it, your eyes will bleed.
@import 'https://fonts.googleapis.com/css?family=Space+Mono';
html, body {
width: 100vw;
height: 100vh;
background: black;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
overflow:hidden;
}
button {
font-family: 'Space Mono', monospace;
letter-spacing: 1px;
background: none;
color: white;
position: relative;
outline: none;
border: none;
height: 50px;
width: 190px;
font-size: 14px;
z-index: 2;
transition: .01s .23s ease-out all;
overflow: hidden;
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 55%;
background: #202020;
z-index: -1;
transition: .3s ease-in all;
}
&:after {
content: '';
position: absolute;
left: -5%;
top: 5%;
height: 90%;
width: 5%;
background: white;
z-index: -1;
transition: .4s .02s ease-in all;
}
&:hover {
cursor: pointer;
color: transparent;
&:before {
left: 100%;
width: 25%;
}
&:after {
left: 100%;
width: 70%;
}
.icon-right.after:after {
left: -80px;
color: white;
transition: .2s .2s ease all;
}
.icon-right.after:before {
left: -104px;
top: 14px;
opacity: 0.2;
color: white;
}
}
}
.icon-right {
position: absolute;
top: 0;
right: 0;
&:after {
font-family: "FontAwesome";
content: '\2192';
font-size: 24px;
display: inline-block;
position: relative;
top: 26px;
transform: translate3D(0, -50%, 0);
}
&.after:after {
left: -250px;
color: black;
transition: .15s .25s ease left, .5s .05s ease color;
}
&.after:before {
content: 'Explore';
position: absolute;
left: -230px;
top: 14px;
opacity: 0;
transition: .2s ease-in all;
}
}
.signature {
position: fixed;
font-family: sans-serif;
font-weight: 100;
bottom: 10px;
left: 0;
letter-spacing: 4px;
font-size: 10px;
width: 100vw;
text-align: center;
color: white;
text-transform: uppercase;
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment