.button1, .button2, .button3, .button4, .button5, .button6, .button7, .button8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 180px;
  font-size: 18px;
  font-weight: 700;
}

.button1 {
  color: #333;
  background-color: #fbdac8; /*シェルピンク*/
  box-shadow: 0 5px 0 #e6bfab; /*アッシュローズ*/
  transition: 0.3s;
}

.button1::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button1:hover {
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 2px 0 #aaaaaa;
}

.button2 {
  color: #333;
  background-color: #f7b977; /*アプリコット*/
  box-shadow: 0 5px 0 #ee7800; /*オレンジ*/
  transition: 0.3s;
}
.button2::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button2:hover {
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 2px 0 #aaaaaa;
}

.button3 {
  color: #333;
  background-color: #f2d58a; /*ブロンド*/
  box-shadow: 0 5px 0 #c4972f; /*イエローオーカー*/
  transition: 0.3s;
}
.button3::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button3:hover {
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 2px 0 #aaaaaa;
}

.button4 {
  color: #333;
  background-color: #bee0c2; /*スカイグリーン*/
  box-shadow: 0 5px 0 #79c06e; /*スペアミント*/
  transition: 0.3s;
}
.button4::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button4:hover {
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 2px 0 #aaaaaa;
}

.button5 {
  color: #333;
  background-color: #a1d8e2;/*サマーシャワー*/
  box-shadow: 0 5px 0 #00afcc; /*ターコイズブルー*/
  transition: 0.3s;
}
.button5::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button5:hover {
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 2px 0 #aaaaaa;
}

.button6 {
  color: #333;
  background-color: #a3b9e0;/*デイドリーム*/
  box-shadow: 0 5px 0 #6c9bd2; /*ヒヤシンス*/
  transition: 0.3s;
}
.button6::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button6:hover {
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 2px 0 #aaaaaa;
}

.button7 {
  color: #333;
  background-color: #cab8d9; /*ラベンダー*/
  box-shadow: 0 5px 0 #a688bd; /*ラベンダーモーブ*/
  transition: 0.3s;
}
.button7::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button7:hover {
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 2px 0 #aaaaaa;
}

.button8 {
  color: #333;
  background-color: #f5ecf4; /*パウダーピンク*/
  box-shadow: 0 5px 0 #ede4e1; /*ピンクベージュ*/
  transition: 0.3s;
}
.button8::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button8:hover {
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 2px 0 #aaaaaa;
}