Skip to content

Instantly share code, notes, and snippets.

@jonschr jonschr/_button.scss
Created Oct 19, 2018

Embed
What would you like to do?
Some button styles in .scss
.button-custom {
display: inline-block;
background: transparent;
color: white;
text-transform: uppercase;
padding: 5px 35px;
font-size: 16px;
font-family: "Roboto", Sans-serif;
font-weight: 500;
position: relative;
transition: .5s all ease;
z-index: 3;
@include mobile {
padding: 3px 20px;
font-size: 13px;
}
&:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: $red;
z-index: -1;
transition: .5s all ease;
}
&:after {
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
background: blue;
border: 2px $red solid;
display: block;
background: transparent;
position: absolute;
z-index: -2;
transform: translateX(7px) translateY(7px);
transition: .5s all ease;
}
&:hover {
&:before {
background: darken($red, 10%);
}
&:after {
background: rgba($red, 0.3);
transform: translateX(10px) translateY(10px);
border-color: transparent;
}
}
}
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.