A Pen by sebastianekstrom.

A-Pen-by-sebastianekstrom.markdown

A Pen by sebastianekstrom

A Pen by sebastianekstrom on CodePen.

License.

index.html

<a href="#" class="button button-confirm">Confirmation</a>
<a href="#" class="button button-warning">Warning</a>
<a href="#" class="button button-alert">Alert</a>

style.scss

@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);
}