Gradient Number Picker

by Sascha

HTML

<div class="buttonContainer">
  <span class="buttonLeft"><</span>
  <span class="buttonRight">></span>
  <span class="buttonCounter">1</span>
</div>

SCSS

$padding: 5px;
$height: 32px;
@mixin align-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.buttonContainer {
  @include align-center;
  width: 140px;
  display: flex;
  font-size: ($height);
  line-height: $height;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #FDEAEB;
  .buttonLeft,
  .buttonRight {
    flex: 1;
    height:$height;
    padding: $padding;
    background-image: linear-gradient(to left, #c62828, #FF5722);
  }
  .buttonLeft {
    border-top-left-radius: $height;
    border-bottom-left-radius: $height;
  }
  .buttonRight {
    border-top-right-radius: $height;
    border-bottom-right-radius: $height;
  }
  .buttonCounter {
    @include align-center;
    height: $height;
    width: $height;
    border-radius: 50%;
    background-image: linear-gradient(to right, black, blue);
    padding: ($padding);
  }
}