<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

<div class="multi-button">
  <button class="cut">Cut</button>
  <button class="copy">Copy</button>
  <button class="paste">Paste</button>
</div>

$base-height: 60px;
$base-width: 180px;
$base-font: "Montserrat", sans-serif;
$base-size: 24px;
$base-radius: 25px;
$base-margin: 5px;

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background-image: linear-gradient(#a8a8a8, #c8c8c8);
}

.multi-button {
  max-width: 700px;
  padding: 10px 16px;
  border-radius: 50px;
  background: #ddd;
  border: 2px solid #ddd;
}

.cut {
  margin: $base-margin;
  height: $base-height;
  width: $base-width;
  font-family: $base-font;
  font-size: $base-size;
  background-color: #aecfc8;
  border: 2px dotted black;
  border-radius: $base-radius;
  cursor: pointer;

  &:hover {
    color: #aecfc8;
    background-color: black;
    border: 2px dotted #aecfc8;
  }
}

.copy {
  margin: $base-margin;
  height: $base-height;
  width: $base-width;
  font-family: $base-font;
  font-size: $base-size;
  background-color: #aec6cf;
  border: 2px dashed black;
  border-radius: $base-radius;
  cursor: pointer;

  &:hover {
    color: #aec6cf;
    background-color: black;
    border: 2px dashed #aec6cf;
  }
}

.paste {
  margin: $base-margin;
  height: $base-height;
  width: $base-width;
  font-family: $base-font;
  font-size: $base-size;
  background-color: #aeb6cf;
  border-radius: $base-radius;
  border: 2px solid black;
  cursor: pointer;

  &:hover {
    color: #aeb6cf;
    background-color: black;
    border: 2px solid #aeb6cf;
  }
}