css３でのbtnのhover時のスワイプ動作が動かない

Question

前提・実現したいこと

ボタンスワイプを実装したい
ここに質問の内容を詳しく書いてください。
htmlcssでコーディングしてます。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

hover時にスワイプに背景色が変わらない

.btn-dl a{
    position: relative;
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #333;
    color: #333 !important;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    background:#f6f6f6;

}
.btn-dl a:hover {
    color: #fff !important;
  }
  .btn-dl a:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: '';
    background: #333;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
}
  .btn-dl a:hover:before {
    transform-origin: left top;
    transform: scale(1, 1);
  }

背景色ある場合だとスワイプができなかたんですが、これは仕様なのでしょうか？

Comments

[kei344]

（質問文は編集できます）HTMLも提示してください。質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[yunosuke]

```
.button::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: '';
background: #333;
transform-origin: right top;
transform: scale(0, 1);
transition: transform .3s;
}
.button:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}
```
```
CSS

.button::before {
transform-origin: left top;
}
.button:hover::before {
transform-origin: right top;
}

```

質問は解決し、これで実装できましたが、背景色ある場合だとスワイプができなかたんですが、これは仕様なのでしょうか？

[kei344]

解決したのであれば、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。
仕様かどうかを聞きたいのであれば、問題が再現できるようにHTMLも提示してください。

[yunosuke]

申し訳ありません。一旦解決済にさせていただきます

[kei344]

https://teratail.com/help#resolve-myself