Annoying CSS Collection

いらっとするUI UX集

よくあるCSS集っぽい顔をしながら、ホバーすると絶妙に使いづらいUIが動きます。

hover
01 hover

音量バーが伸びる

音量を変えようとすると、バー自体がどんどん伸びていく。

メディアの音量

まだ先がある...

03 hover

トグルが逃げる

ONにしようとすると、つまみが反対側へ逃げる。

押させる気がない

04 hover

閉じるボタンが逃げる

閉じようとすると、×ボタンが微妙に遠ざかる。

閉じたいだけなのに

05 hover

読み込みバーが戻る

99%まで進んだあと、なぜか途中まで戻る。

Loading...

今戻った?

06 hover

チェックボックスが増える

同意しようとすると、確認項目が増えていく。

同意が増えた

07 hover

パスワード表示が一瞬

見えると思ったら、すぐ黒丸に戻る。

•••••••••••• P@ssw0rd123! 👁

見えた...?

08 hover

日付選択がずれる

選びたい日付の隣が選択される。

そこじゃない

09 hover

明るさバーがまぶしい

暗くしたいのに、操作部分だけまぶしく光る。

暗くしたいのに

10 hover

地図ピンが逃げる

目的地に置きたいのに、ピンが少しずれる。

📍

そこじゃないってば

12 hover

ボタンが押す直前に小さくなる

押そうとすると、ボタンが急に小さくなって狙いづらい。

急に小さくならないで

13 hover

タブの選択位置が隣にずれる

選びたいタブに触ると、アクティブ表示だけ隣へ移動する。

そこじゃない

14 hover

通知バッジが増える

通知を確認しようとすると、未読数が一気に増える。

🔔 1

増やさないで

15 hover

星評価が勝手に下がる

5つ星を選んだつもりが、触った瞬間に3つ星っぽくなる。

評価させて

16 hover

アコーディオンが少しだけ開く

詳細を見ようとすると、本文がほんの少しだけ見える。

ここまで見せるなら、もう全部見せてほしい説明文です。

そこまで見せたなら

17 hover

必須マークが後から出る

入力しようとしたタイミングで、急に必須だと知らされる。

先に言って

19 hover

画像アップロード欄が避ける

画像を置こうとすると、ドロップエリアが少し横に逃げる。

画像をドロップ

受け取って

20 hover

削除ボタンだけ魅力的に光る

キャンセルしたいのに、削除ボタンだけ妙に目立ってくる。

本当に削除しますか?

この操作は取り消せません。

押させにきてる

21 hover

戻るボタンが戻りすぎる

1つ前に戻るつもりが、最初まで戻る。

商品詳細 カート 注文確認 完了

1回押しただけなのに

click
11 click

送信ボタンが待たせる

押すたびにカウントダウンが始まる。

毎回待たされる

18 click

コピーした気がするボタン

押すとコピー完了っぽい雰囲気だけ出してくる。

npm install annoying-ui

気がするだけ