ボタンのホバーアニメーションでカーソルが乗るとパタパタする

Question

https://sirinova.com/nova-button.html

Chromeでボタンの上部にカーソルを乗せるとアニメーション→アニメーションのキャンセルでカーソルが点滅します。CSSのみでこの問題を解決する方法はありますか？

.btn01 a, .btn02 a, .btn03 a, .btn04 a, .btn05 a, .btn06 a, .btn07 a {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    max-width: 90%;
    padding: .8em 1.6em;
    transition: .3s ease-in-out;
    color: #fff;
    background-color: #5bbff7;
}
.btn02 a {
    opacity: inherit;
    box-shadow: 0 4px 0 #4999c6;
}
.btn02 a:hover {
    transform: translateY(3px);
    background-color: #4999c6;
    box-shadow: 0 1px 0 #4999c6;
}

追記、以下の方法でパタパタは収まりましたが、ホバーがボタンの外側まで反応してしまいます。

.btn02:hover a{
    transform: translateY(3px);
    background-color: #4999c6;
    box-shadow: 0 1px 0 #4999c6;
}

追記２「デザイン2（立体ボタン）」はposition: relative;を追加したらパタパタが無くなりました。理由は分かりません。デザイン1（フラットボタン）の方はまだパタパタしてしまいます。

.btn02 a {
    opacity: inherit;
    box-shadow: 0 4px 0 #4999c6;/* 追加 */
    position: relative;
}

Answer 1

:hoverの検知主体を”動く”a要素から、”動かない”btn02クラスに変更すればよいでしょう.

.btn02 a:hover {
    transform: translateY(3px);
    background-color: #4999c6;
    box-shadow: 0 1px 0 #4999c6;
}

↓

.btn02:hover a{
    transform: translateY(3px);
    background-color: #4999c6;
    box-shadow: 0 1px 0 #4999c6;
}

Comments

[snof]

ありがとうございます。パタパタは収まったのですが、ボタンの幅を超えてホバーされてしまいました。gifを追加しましたのでご覧いだだけたらと思います。

[defghi1977]

> パタパタは収まったのですが、ボタンの幅を超えてホバーされてしまいました。
原理的に、ホバーを検知しているノードとアニメーション対象の(要はホバーの検知範囲が変化する)ノードとを一緒にしている限りこの問題は解決できません.
従って,
- 甘んじてパタパタするのを受け入れる
- ホバー範囲をアニメーション対象のノードから切り離す、つまり多少のホバー範囲のずれを受け入れる
のいずれかを選択するしかありません

[snof]

回答ありがとうございます。よく考えると気づく人は殆どいないと思うのでこのままでいこうと思います。