<div class="multi-button">
  <button class="btn-primary">Cut</button>
  <button class="btn-secondary">Copy</button>
  <button class="btn-secondary-custom">Paste</button>
</div>

// === Variables

// Colours
$dark-grey: #1F1A25;
$yellow: #FDE74C;
$purple: #B8B3E9;
$blue: #78E0DC;
$white: #FFFFFF;

// Typography
@import url('https://fonts.googleapis.com/css?family=Muli:400,700,800&display=swap');

$font-set-1: 'Muli', Arial, sans-serif;

$normal: 400;
$bold: 700;
$extra-bold: 800;


// === Codepen specific
body { 
  background: $dark-grey;
  display: flex; 
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}


// === Button Styles
@mixin btn($txt, $bx, $bx-hover) {
  border: 0;
  border-radius: 5px;
  color: $txt;
  font-family: $font-set-1;
  font-weight: $extra-bold;
  text-transform: uppercase;
  padding: 1rem 2rem;
  font-size: 1rem;
  background-color: $bx;
  box-shadow: 0 8px darken($bx, 20%);
  
  &:hover {
    cursor: pointer;
  }
  
  &:focus {
    outline: none;
  }
    
  &:hover,
  &:focus {
    background-color: darken($bx-hover, 10%);
  }
  
  &:active {
    transform: translateY(4px);
    box-shadow: 0 3px darken($bx, 20%);
  }  
}

button {
  @include btn($txt: $dark-grey, $bx: $blue, $bx-hover: $blue);
}

// Cut - blue
.btn-primary {
  @include btn($txt: $dark-grey, $bx: $blue, $bx-hover: $blue);
}

// Copy - purple
.btn-secondary {
  @include btn($txt: $dark-grey, $bx: $purple, $bx-hover: $purple);
  
}

// Paste - yellow
.btn-secondary-custom {
  @include btn($txt: $dark-grey, $bx: $yellow, $bx-hover: $yellow);
}