非活性化したボタンの画像をグレーにする（ちょっと良いUIおれおれAdvent Calendar 2024 – 16日目）

ちょっと良いUIおれおれAdvent Calendar 2024 – 16日目

マウスカーソル載せたりタップしたりのタイミングでちょっと opacity いじったりするじゃないですか。あんな感じのノリで :disabled のときにボタンで使ってる画像をグレーにしておくと見た目わかりやすくて良いんじゃないかなと思います。

デモ：

• https://codepen.io/ginpei/pen/LEPxVao

filter: grayscale(1) でグレーに

なります。

button {
  &:disabled {
    filter: grayscale(1);
  }
}

おしまい

無効化時にボタンがグレーになる前提の話でした。

参考

• filter – CSS: カスケーディングスタイルシート | MDN
• デモ：https://codepen.io/ginpei/pen/LEPxVao