<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
<div class="button button-purple">Click</div>
body {
  text-align: center;
  background-color: thistle;
  padding-top: 30px;
  letter-spacing: 1.3px;
}

//Basic button styling
.button {
    color: #fff;
    display: inline-block;
    padding: 8px 15px;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    margin: 20px auto;
    border-radius: 10px;
}

//Base Color
$violet-base: #A200FF;

//Mixin for Button Properties: Border + Background-Color
@mixin buttonColorProperties($color) {
    $border: adjust-hue($color, -6deg);
    background-color: $color; 
    border: 3px solid $border;
}

//Mixin that applies the above color properties 
@mixin buttonColors($baseColor) {
    @include buttonColorProperties($baseColor);
  
    &:hover {
      $base-hover: darken($baseColor, 30);
      
      @include buttonColorProperties($base-hover);
      transition: all 0.25s;
    }
}

//using the mixin & passing it the violet hex
.button-purple  {
  @include buttonColors($violet-base);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.