Skip to content

Instantly share code, notes, and snippets.

@j7u7l7s

j7u7l7s/sass-buttons.scss

Created February 4, 2019 15:20
Show Gist options
  • Save j7u7l7s/3a48275cca86ca4f877ff412ce408e64 to your computer and use it in GitHub Desktop.
Save j7u7l7s/3a48275cca86ca4f877ff412ce408e64 to your computer and use it in GitHub Desktop.
Download ZIP
A logical and modular way of styling buttons with SCSS
Raw
sass-buttons.scss
.action_button {
background-color: #999;
border-color: #999;
&:hover {
background-color: lighten(#999, 10%);
border-color: lighten(#999, 10%);
}
&.action_button--primary {
$color: #e0004d;
background-color: $color;
border-color: $color;
&:hover {
background-color: lighten($color, 10%);
border-color: lighten($color, 10%);
}
}
&.action_button--secondary {
$color: #03a196;
background-color: $color;
border-color: $color;
&:hover {
background-color: lighten($color, 10%);
border-color: lighten($color, 10%);
}
}
&.action_button--tertiary {}
// Sizes
&.action_button--small {}
&.action_button--large {}
// Styles
&.action_button--hollow {
&.action_button--primary {
$color: #e0004d;
background: transparent;
color: $color;
&:hover {
background: $color;
color: #fff;
}
}
&.action_button--secondary {
$color: #03a196;
background: transparent;
color: $color;
&:hover {
background: $color;
color: #fff;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment