ふわっとホバーするボタン、好きですか？[ホバー4種類]
こんにちは！Setのデザイナー、櫻田です。
この前までヒートテックを着ていたのに、今日になったら途端に薄手のシャツでも暑くて気候の振り幅に驚いています。
さてさて、突然ですが、ふわっと動くボタンは好きですか？
私は大 好きです！
近年、Satisfying動画と呼ばれるCGアニメーションが登場したりしていますが、よく作られたボタンとモーションってUIというデザインの枠に留まらない美しさがあるなと思います。
Satisfying 3D Animations | Oddly Satisfying Video – YouTube
今回はそんなホバーモーションとボタンのデザインを考えてみようと思います。
00 | 下準備
今回はシャドウでできた角丸のボタンを用意してみました。ボタンの色は背景色と同じですが、シャドウをつけることで存在感を出しています。
これを「ふわっ」とさせていこうと思います。
01 | ホバーするとふわっと浮かび上がるボタン
ホバーしたときにシャドウのブラーの数値を増やし、位置を数px上にあげることで「ふわっ」感を出しています。
今回はシャドウを12px→24px、位置を5pxほど上にしています。
02 | ホバーするとふわっと浮かび上がって大きくなるボタン
01に加えて、ホバーの際にボタンそのもののサイズを大きくしたパターンです。
ホバーしたときの動きが大きくなるので、シンプルなボタンでも存在感を増すことができます。
単体でもいいですが、ボタンが複数並んでると動きも可愛くなる気がします。ぽこぽこって感じ。
03 | ホバーするとふわっと押し込まれるボタン
上二つとは逆に、ホバーすると押し込まれたように動くボタンです。
シャドウのブラーを半分にし、数px下に動かすことで実際に存在しているボタンが押し込まれたような動きになります。
04 | ホバーするとふわっと押し込まれて色が変わるボタン
03の応用編です。
ホバーした際にボタンそのものの色を少し暗くすると、さらに「押し込まれた」感が増します。
さいごに
ボタンをシンプルにすると目立たない….と思われがちですが、ホバーの動きを工夫することで適度に存在感があり、かつ押してみたいと思わせる心地いいボタンになります。またいい感じのボタンを思いついたら投稿します〜
埼玉県出身。
よく喋り、よく考え、よく食べるがモットー。
音楽とWebデザインをこよなく愛するデザイナー。
