Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// Buttons
// ".btn-{modifiername}", background-color, border, color
$buttons: (
("primary", #2F9ED8, #2886B7, #FFFFFF),
("secondary", #FFFFFF, #DDDDDD, #101010)
);
// Generate Button Modifiers
@each $b in $buttons {
.btn.btn-#{nth($b,1)} {
background-color: #{nth($b,2)};
border-color: #{nth($b,3)};
color: #{nth($b,4)};
}
}
// Base Button
.btn {
display: inline-block;
border: 1px solid transparent;
padding: 0.5rem 1rem;
border-radius: 3px;
font-family: sans-serif;
}
.btn.btn-primary {
background-color: #2F9ED8;
border-color: #2886B7;
color: #FFFFFF;
}
.btn.btn-secondary {
background-color: #FFFFFF;
border-color: #DDDDDD;
color: #101010;
}
.btn {
display: inline-block;
border: 1px solid transparent;
padding: 0.5rem 1rem;
border-radius: 3px;
font-family: sans-serif;
}
<a class="btn btn-primary">Primary Button</a>
<a class="btn btn-secondary">Default Button</a>
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.