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

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

デモ：

filter: grayscale(1) でグレーに

なります。

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

ふたつのボタンのうち非活性化状態のものの中の寿司絵文字がグレーになっている様子。

おしまい

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

参考