$red: #ff4136;
$green: #2ecc40;
$blue: #0074d9;

body {
  padding: 10%;
  font-family: sans-serif;
}

button {
  padding: 1em;
  border: 0;
  margin: 0.25em;
  color: #fff;
  cursor: pointer;
}

.f-red {
  background: $red;
  &:hover { background: darken($red, 15%); }
}
.f-green {
  background: $green;
  &:hover { background: darken($green, 15%); }
}
.f-blue {
  background: $blue;
  &:hover { background: darken($blue, 15%); }
}
.f-all {
  background: #333;
  &:hover { background: darken(#333, 15%); }
}

.red, .green, .blue {
  color: #fff;
  padding: 1em;
  margin-bottom: 0.25em;
}

.red { background: $red; }
.green { background: $green; }
.blue { background: $blue; }