使える! CSSだけで作るオシャレで映えるボタンデザイン
Contents
Collection of Button Hover Effects
様々なホバーエフェクトです。アニメーションがリッチなので目を引きたい場合に使えそうです。
See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.
Gradient text border background Button With Animation
Instagramのようなグラデーションが美しいボタンです。グラデーションを自分で作るのは難易度が高いと感じることが多いですが、この作品を参考にすると楽にできそうです。
See the Pen Gradient text border background Button With Animation by Monkey Company (@monkey-company) on CodePen.
Bubbly Button
ボタンを押すとバブルが弾けるカワイイアニメーションです。
See the Pen Bubbly Button by Nour Saud (@nourabusoud) on CodePen.
押すと押した所から円形状に広がるMaterial Designのアニメーションです。デザインもいかにもAndroidと言うようなものでもないので様々なサイトで使えそうです。
See the Pen Material design buttons by Michaela (@Fischaela) on CodePen.
CSS Buttons hover effects
ホバー時のアニメーションです。横や上から被さるアニメーションの他、外側から中心に向かって色が変わるアニメーションなど多彩です。
See the Pen CSS Buttons hover effects by Aladin Bensassi (@Eliteware) on CodePen.
Cool Buttons
フラットデザインが主流になりスキューモーフィズムデザインは見なくなりましたが、フラットすぎるデザインが合わないなんて事もしばしばあるでしょう。Cool Buttonsはフラットながら立体感やマットな質感を表現しており落ち着いた印象にしたい場合に使えそうです。
See the Pen Cool Buttons by Felipe Marcos (@FelipeMarcos) on CodePen.
Download Button Animation
Download Button Animationはその名の通りダウンロードボタンのアニメーションです。ダウンロードボタンは単にダウンロードと表示しただけでは、なかなかダウンロードが開始・終了せず正常にリクエストできたか不安になると言うことがよくあります。このようなアニメーションがあるとダウンロードに時間がかかる場合でもユーザーに安心感を与えられるでしょう。
See the Pen Download Button Animation by Aaron Iker (@aaroniker) on CodePen.
CSS Animations: Obvious CTA Buttons
Click Me!(クリックしてくれ)と主張できそうなアニメーションです。クリックする前からアニメーションが始まっているのでユーザーの目を引きたい時に使えそうです。
See the Pen CSS Animations: Obvious CTA Buttons by Olivia Ng (@oliviale) on CodePen.
今回はCodepenからボタンのデザインに使えそうなPenをいくつかピックアップしました。定期的にCodepenを見てると良いインスピレーションがあると思います。是非チェックしてみてください。