Skip to content

Instantly share code, notes, and snippets.

@adnasa adnasa/_btn.css
Created Feb 4, 2016

Embed
What would you like to do?
Overhaul suggestion 1: Adding a specific class that defines that block's state itself
.btn,
.btn--primary,
.btn--secondary,
.btn--inverted {
outline: none;
border: none;
padding: 5px 10px;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn--primary {
color: #333333;
background-color: #FFBA27;
}
.btn--secondary {
color: #ADADAD;
background-color: #fff;
border: 2px solid #ADADAD;
border-radius: 2px;
padding: 3px 20px;
}
.btn--inverted {
color: #fff;
background-color: #ADADAD;
}
.btn {
outline: none;
border: none;
padding: 5px 10px;
letter-spacing: 1px;
text-transform: uppercase;
&--primary {
@extend .btn;
color: #333333;
background-color: #FFBA27;
}
&--secondary {
@extend .btn;
color: #ADADAD;
background-color: #fff;
border: 2px solid #ADADAD;
border-radius: 2px;
padding: 3px 20px;
}
&--inverted {
@extend .btn;
color: #fff;
background-color: #ADADAD;
}
}
<button class="btn--primary">Hello, sunrise!</button>
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.