冗長なコードを短くする技術について

Question

以下のようなコードで.btn1やbtn2をCSSで全て指定したとしたら冗長なコードになってしまいました。
nth-childも試しましたが、うまく動作してくれません。
1つずつボタンを押したかの判定を行いたいので、btn1やbtn2などのように分けています。
どうにかしてCSSでもう少し短くできないでしょうか？
SCSSで変数としてforするしかないのでしょうか？

<div class="container">
          <button type="button" class="buttons btn1"
          onclick="document.querySelector('.btn1').classList.toggle('clicked')">家賃
            <div class="cost">80,000円</div>
          </button>
          <button type="button" class="buttons btn2"
          onclick="document.querySelector('.btn2').classList.toggle('clicked')">光熱費
            <div class="cost">5,000円</div>
          </button>
          <button type="button" class="buttons btn3"
          onclick="document.querySelector('.btn3').classList.toggle('clicked')">水道代
            <div class="cost">5,000円</div>
          </button>
          <button type="button" class="buttons btn4"
          onclick="document.querySelector('.btn4').classList.toggle('clicked')">通信費
            <div class="cost">5,000円</div>
          </button>
          <button type="button" class="buttons btn5"
          onclick="document.querySelector('.btn5').classList.toggle('clicked')">食費
            <div class="cost">40,000円</div>
          </button>
          <button type="button" class="buttons btn6"
          onclick="document.querySelector('.btn6').classList.toggle('clicked')">音楽
            <div class="cost">1,000円</div>
          </button>
          <button type="button" class="buttons btn7"
          onclick="document.querySelector('.btn7').classList.toggle('clicked')">動画
            <div class="cost">2,000円</div>
          </button>
          <button type="button" class="buttons btn8"
          onclick="document.querySelector('.btn8').classList.toggle('clicked')">Offce関連
            <div class="cost">1,000円</div>
          </button>
        </div>

.buttons.btn1.clicked {
  box-shadow: none;
  transform: translateY(0);
  color: rgba(0, 0, 0, 0.25);
}
.buttons.btn2.clicked {
  box-shadow: none;
  transform: translateY(0);
  color: rgba(0, 0, 0, 0.25);
}
.buttons.btn3.clicked {
  box-shadow: none;
  transform: translateY(0);
  color: rgba(0, 0, 0, 0.25);
}
.buttons.btn4.clicked {
  box-shadow: none;
  transform: translateY(0);
  color: rgba(0, 0, 0, 0.25);
}
.buttons.btn5.clicked {
  box-shadow: none;
  transform: translateY(0);
  color: rgba(0, 0, 0, 0.25);
}
.buttons.btn6.clicked {
  box-shadow: none;
  transform: translateY(0);
  color: rgba(0, 0, 0, 0.25);
}
.buttons.btn7.clicked {
  box-shadow: none;
  transform: translateY(0);
  color: rgba(0, 0, 0, 0.25);
}
.buttons.btn8.clicked {
  box-shadow: none;
  transform: translateY(0);
  color: rgba(0, 0, 0, 0.25);
}

Answer 1

.buttons.clicked {
  box-shadow: none;
  transform: translateY(0);
  color: rgba(0, 0, 0, 0.25);
}

で普通にできました。。。