Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Jul 31, 2018

Embed
What would you like to do?
Layered Button
<div class="btn-wrapper">
<div class="btn-wrapper__container">
<div class="btn-inner">
<a class="btn-inner__text" href="#">Hover Me</a>
</div>
</div>
</div>
// Variables
$blue: #15B5E2;
$btn-bg: #10131C;
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-image: url('https://image.ibb.co/icbLMF/ep_naturalblack.png');
}
.btn-wrapper {
width: 290px;
height: 110px;
position: relative;
margin: 40px auto 0;
&:hover {
.btn-inner {
top: -4px;
transform: scale(1, 1);
cursor: pointer;
}
}
&__container {
border-bottom: 2px solid $blue;
position: absolute;
width: 100%;
height: 80px;
&:before,
&:after {
border-bottom: 2px solid $blue;
width: 96%;
left: 2%;
bottom: -8px;
content: "";
position: absolute;
}
&:after {
width: 92%;
left: 4%;
bottom: -14px;
}
.btn-inner {
width: 104.2%;
height: 100%;
position: absolute;
top: 20px;
left: -2.1%;
border: 2px solid $blue;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Source Code Pro', monospace;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 18px;
background: $btn-bg;
transform: scale(.96, .96);
transition: all .3s;
z-index: 4;
&__text {
text-decoration: none;
color: $blue;
}
}
}
}
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" />
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.