Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A Pen by sebastianekstrom.
<a href="#" class="button button-confirm">Confirmation</a>
<a href="#" class="button button-warning">Warning</a>
<a href="#" class="button button-alert">Alert</a>
@import "compass";
@function set-button-text-color($color) {
@if (lightness( $color ) > 40) {
@return black;
@else {
@return white;
%button {
text-decoration: none;
padding: 2em 3em;
width: 30%;
margin: 2% auto;
display: block;
text-align: center;
font-size: 1.5em;
font-family: sans-serif;
font-weight: bold;
@include border-radius(10px);
.button {
@extend %button;
$button_confirm: green;
$button_warning: #ffc53a;
$button_alert: red;
.button-confirm {
background: $button_confirm;
color: set-button-text-color($button_confirm);
.button-warning {
background: $button_warning;
color: set-button-text-color($button_warning);
.button-alert {
background: $button_alert;
color: set-button-text-color($button_alert);
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.