ボタンホバー「左から右へ抜けていく背景」

scaleXで0→1に変化すること、originで開始位置を指定することがポイント。

.horizontalOverlay::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsl(243, 80%, 62%);
  opacity: 0.1;
  transform: scaleX(0);
  transform-origin: 100% 100%;
  transition: transform 0.6s cubic-bezier(0.53, 0.21, 0, 1);
  will-change: transform;
}


.horizontalOverlay:hover::before {
  transform-origin: 0 0;
  transform: scaleX(1);
}