Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
mPaWbp
<button>Button Text</button>
$buttonBackgroundColour: #d17d73;
$buttonText: "Button Text";
$buttonTextColour: #fff;
$buttonWidth: 200px;
$buttonHeight: 50px;
$buttonBorderRadius: 3px;
button {
position: relative;
left: 50vw;
top: 50vh;
transform: translate(-50%,-50%);
width: $buttonWidth;
height: $buttonHeight;
appearance: none;
border: 0;
background: $buttonBackgroundColour;
border-radius: $buttonBorderRadius;
color: $buttonTextColour;
text-align: center;
line-height: $buttonHeight;
font-size: 16px;
&:before {
content: $buttonText;
background: #d17d73;
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
top: 0;
left: 0;
border-radius: $buttonBorderRadius;
transition: all 0.3s ease-in-out;
}
&:after {
transition: all 0.3s ease-in-out;
content: " ";
position: absolute;
left: 50%;
transition: all 0.3s ease;
width: 90%;
height: 50%;
box-shadow: 0px 2px 50px rgba(0,0,0,.5);
border-radius: 3px;
bottom: 0;
transform: translateX(-50%);
z-index: 0;
}
&:hover {
&:before {
background: lighten($buttonBackgroundColour, 2%);
transition: all 0.3s ease-in-out;
}
&:after {
box-shadow: 0px 2px 60px rgba(0,0,0,.65);
}
}
&:focus {
outline: none;
border: none;
}
&:active {
outline: none;
border: none;
&:before {
background: darken($buttonBackgroundColour, 2%);
transition: all 0.3s ease-in-out;
}
&:after {
box-shadow: 0px 2px 40px rgba(0,0,0,.65);
}
}
}
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.