Creating buttons with compass using mixin and contrast-color

To make sure that the text will be a readable the color get set to a contrast of the background using the contrast-color function in Compass.

@import "compass";

@mixin button($color) {
  background-color: $color;
  color: contrast-color($color, #111, #eee,50%);
}

.btn-a {
  @include button(#9fb2b0);
}

.btn-b {
  @include button(#e58e1a);
}

.btn-c {
  @include button(#322e2a);
}

Add your comment