Files
portfolio/static/scss/_buttons.selected.scss

53 lines
1011 B
SCSS

@import 'utilities/mixins';
@import 'utilities/variables';
button {
display: inline-block;
position: relative;
border: 1px solid white !important;
border-radius: 4px;
font-size: 0.8rem;
font-family: 'Roboto', sans-serif;
text-align: center;
text-transform: uppercase;
text-decoration: none;
padding: 10px;
color: white;
z-index: 1;
overflow: hidden;
background-color: #2C2F33;
}
.center-skew-hover {
@include transition(color $skew-text-transition-time ease-in-out);
border-radius: 12px;
&:hover {
color: $skew-hover-font;
cursor: pointer;
&:before {
right: 0%;
left: 0%;
margin-left: -1em;
margin-right: -1em;
background: $skew-hover-background;
}
}
&:before {
@include transform(skewX($skew-x-degrees));
@include transition(all $skew-all-transition-time ease-in-out);
content: '';
display: block;
position: absolute;
top: 0;
right: 50%;
bottom: 0;
left: 50%;
z-index: -1;
}
}