Skip to content

Instantly share code, notes, and snippets.

@adnasa adnasa/_btn.css
Last active Feb 4, 2016

Embed
What would you like to do?
Overhaul suggestion 2: .btn class to set a base for button. adding an additional class to change its state.
.btn {
outline: none;
border: none;
padding: 5px 10px;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn.btn--primary {
color: #333333;
background-color: #FFBA27;
}
.btn.btn--secondary {
color: #ADADAD;
background-color: #fff;
border: 2px solid #ADADAD;
border-radius: 2px;
padding: 3px 20px;
}
.btn.btn--inverted {
color: #fff;
background-color: #ADADAD;
}
.btn {
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;
}
}
<button class="btn 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.