Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SASS buttons using extend
/* Buttons
============================================================
========================================================= */
// button:disabled {
// background: $gray;
// }
%button {
color: #fff;
// font-weight: 600;
text-shadow: 1px 1px #333;
background: lighten($button, 10%);
border: 1px solid lighten($button, 20%);
cursor: pointer;
@include rounded(5px);
&:hover {
border: 1px solid lighten($buttonHover, 10%);
background: $buttonHover;
}
&:active {
text-shadow: 1px 1px #666;
border: 1px solid darken(#6e6f72, 10%);
background: lighten($button, 20%);
}
}
%twitter-background {
color: #fff;
background: $twitter;
}
%facebook-background {
color: #fff;
background: $facebook;
}
.btn {
// .btn--twitter
&--twitter {
@extend %button;
@extend %twitter-background;
}
// .btn--facebook
&--facebook {
@extend %button;
@extend %facebook-background;
}
}
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.