button要素のモダンなホバースタイルの書き方の結論を自分の中で出してみた

TL;DR

@property --c-button-bg-hover {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}

@media (any-hover: hover) {
  button:enabled:hover {
    background-color: var(--c-button-bg-hover);
  }
}

button:focus-visible {
  background-color: var(--c-button-bg-hover);
}

ポイント

• @media (any-hover: hover) { ... } でホバーを有効にする
• button:enabled:hover でホバー時のスタイルを指定する
• button:focus-visible でフォーカス時のスタイルを指定する

@media (any-hover: hover) { ... } でホバーを有効にする

T.B.D

button:enabled:hover でホバー時のスタイルを指定する

T.B.D

button:focus-visible でフォーカス時のスタイルを指定する

T.B.D

参考リンク

hoverを指定するならany-hoverメディア特性を使いなさい！俺流hover実装例も紹介します – TAKLOG tak-dcxi.com

タップデバイスでもhoverが動いているWebサイトが多すぎる！hoverを指定するならany-hoverメディア特性を使いなさい！ついでに俺流hover実装例も紹介します。

cssのメディア特性any-hoverを選択する理由 zenn.dev

【CSS】まだホバー時のスタイルを :hover だけで指定してるの？ zenn.dev

any-hover - CSS: カスケーディングスタイルシート | MDN developer.mozilla.org

any-hover は CSS のメディア特性で、要素の上で停止することができる入力メカニズムが何らか利用できるかどうかを検査するために使用することができます。

:focus-visible - CSS: カスケーディングスタイルシート | MDN developer.mozilla.org

:focus-visible 擬似クラスは、要素が :focus 擬似クラスに一致している時で、ユーザーエージェントが要素にフォーカスを明示するべきであると推測的に判断した場合に適用されます (多くのブラウザーではこの場合、既定で「フォーカスリング」を表示します)。