ボタンホバー「背景が左から入る→左に戻る」

【あるあるバグ】safariだと背景のアニメーション中、角丸がとれてしまう。
解決策：ボタンの親要素（例1だと.overlayLeftBtn）にz-index:1（の前提となるpotisionも含め）を追記する

疑似要素でhoverで入ってくる背景部分を作ってabsoluteで配置しておき（外枠でoverflow: hidden;）、それをhover時にtransformさせて見える範囲に動かしている。
背景として疑似要素が出入りするためボタンのテキスト部分はspanで囲ってz-indexを疑似要素より重なり順を上にしておく。

例1

例1では素直にtranslateで要素を左右に移動させているが、

.overlayLeftBtn span {
  color: hsl(243, 80%, 62%);
  position: relative;
  z-index: 1;
  transition: color 0.6s cubic-bezier(0.53, 0.21, 0, 1);
}
.overlayLeftBtn::before {
  content: '';;
  position: absolute;
  top: 50%;
  left: 0;
  border-radius: 6px;
  transform: translate(-101%, -50%);
  width: 100%;
  height: 100%;
  background-color: hsl(243, 80%, 62%);
  transition: transform 0.6s cubic-bezier(0.53, 0.21, 0, 1);;
}
.overlayLeftBtn:hover span {
  color: hsl(222, 100%, 95%);
}
.overlayLeftBtn:hover::before {
  transform: translate(0, -50%);
}

例2

例2の場合は、transform: scaleX(0) →　(1)を使って疑似要素を左右移動させている。この場合transform-origin: left;で移動の原点を指定しておく必要がある。

.c-btn {
  …中略
  overflow: hidden;
  position: relative;
  z-index: 1;//←重要
  span {
    display: block;
    z-index: 1;
    transition-duration: 0.4s;
    transition-property: color;
  }
  &::before {
    content: '';
    width: 110%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #444;
    z-index: 0;
    transform-origin: left;
    transition: 0.4s;
    transform: scaleX(0);
  }
  &:hover {
    span {
      color: #fff;
    }
    &::before {
      transform: scaleX(1);
    }
  }
}