personal-site/assets/scss/modules/_buttons.scss
2020-04-16 22:11:17 +02:00

30 lines
687 B
SCSS
Executable File

/***************
BUTTON DEFAULTS
***************/
@mixin button--outline($btn-color: $primary-color, $btn-font-color: white) {
background-color: transparent;
display: inline-block;
position: relative;
font-family: $sans-serif;
text-decoration: none;
color: $btn-color;
font-size: 0.9em;
line-height: 1.2em;
font-weight: 300;
padding: 0.5em 1.5em;
border: 1px solid $btn-color;
border-radius: 4px;
cursor: pointer;
margin-bottom: 0.5em;
transition: background-color 0.14s ease-in-out;
// hovering on the btn
&:hover,
&:focus {
color: $btn-font-color;
text-decoration: none;
background-color: $btn-color;
} // end hover
} // end .button