.stripeRule(@color) {
  border: solid 2px @color;
  color: black !important;
  background-image: repeating-linear-gradient(
    45deg,
    @color,
    @color 10px,
    rgba(0, 0, 0, 0.15) 10px,
    rgba(0, 0, 0, 0.15) 20px
  );
}

.striped-btn {
  &.blue-btn {
    .stripeRule(@blue);
  }
  &.pink-btn {
    .stripeRule(@pink);
  }

  &.red-btn {
    .stripeRule(@red);
  }

  &.green-btn {
    .stripeRule(@green);
  }

  &.yellow-btn {
    .stripeRule(@yellow);
  }

  &.orange-btn {
    .stripeRule(@orange);
  }

  &.purple-btn {
    .stripeRule(@purple);
  }

  &.black-btn {
    border: solid 2px black;
    color: white !important;
    background-image: repeating-linear-gradient(
      45deg,
      black,
      black 10px,
      rgba(255, 255, 255, 0.15) 10px,
      rgba(255, 255, 255, 0.15) 20px
    );
  }

  &.white-btn {
    .stripeRule(@white);
  }
}