【保存版】CSSだけで作れるホバーアニメーションボタン総まとめ
ボタンがあれば、とりあえずホバーしてみる
どうも、オークニです。
ブログ運営者であれば誰でも一度はいじったことのあるボタンデザイン。ひとたびボタンをいじりだすと、今度は他人のボタンさえも気になって、クリックする気は無いがとりあえずホバーさせてみる。
という、いわゆるホバー症候群（てきとー笑）は誰もが経験あるはず。
何の気なしに触れたそのボタンがヌルヌルのアニメーションをした時、人は関心と同時に心地よさを覚えるだろう。
本記事では、あなたのブログの”心地よさ向上”に役立つかもしれない、ヌルヌルなアニメーションボタン（しかもCSSだけで作れる）を、CodePen100ページくらい漁ってまとめてみた。
保存するも良し、さっそく使ってみるも良し、なにか1つでも参考になれば幸いである。
枠線がアニメーションするボタン
See the Pen Button Hover States by James Power (@thejamespower) on CodePen.
色んなパターンで枠線がアニメーション。アニメーションの勉強としてもあり。
See the Pen CSS Border transitions by Giana (@giana) on CodePen.
後半から、かなり特殊なアニメーションとなっている。
See the Pen Wacky buttons #2 by Alex Taietti (@AlexTaietti) on CodePen.
このアニメーションの真髄は、カーソルを外したときである。
See the Pen Buttons css hover effect by deineko (@deineko) on CodePen.
思いつく限りの「カギ括弧」系やっちゃいました系。
See the Pen Line Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.
あえて言わせていただこう。ほぼ、どれも一緒😂
See the Pen Button Border Hover Effects by Sarath AR (@sarath-ar) on CodePen.
先ほどのものよりかは、バリエーションがあってよろしい。
See the Pen Button effects by Emanuel Gonçalves (@Emanuel_G) on CodePen.
あー。これはオシャレですわ。
背景がアニメーションするボタン
See the Pen 12 fancy buttons by bartekd (@bartekd) on CodePen.
10番の動きやばす。
See the Pen CSS Buttons hover effects by aladin ben sassi (@Eliteware) on CodePen.
背景覆う系のテンプレート的存在。
See the Pen Button Hover Effects by Ritchie Jacobs (@ritchiejacobs) on CodePen.
こちらもいかが的な。
See the Pen Button hover effects with box-shadow by Giana (@giana) on CodePen.
むしろ、配色を参考にしたいところでもある。
See the Pen Animated CSS3 Buttons by Sazzad (@sazzad) on CodePen.
なんだかんだ…ビクトリア推し。
See the Pen 20 Button Hover Effects by Rosa (@RRoberts) on CodePen.
これは参考になる。バリエーションの豊富さが良き！
See the Pen Circle Expando Buttons by Chris Coyier (@chriscoyier) on CodePen.
なんて斬新なアニメーション。SNSボタンとかにもよさそう。
See the Pen Flat Buttons by Benjamin Vilina (@BenjaminVilina) on CodePen.
こんちわ〜す型。後ろに身を引きながら、メッセージを出すところ…したたかである。
See the Pen Offset Color Button by Daniel Powell (@bloom-dan) on CodePen.
統一感出せたら、けっこーオシャレかと。
枠線＆背景アニメーションボタン詰め合わせ
See the Pen Buttons by Elie (@eliedim) on CodePen.
10番目のテキストの動き、まさにファンタジスタ。
See the Pen Fancy Buttons with Amazing Hover Effects by ahmed beheiry (@ahmedbeheiry) on CodePen.
オシャレ上級者かよ。
See the Pen Colorful CSS Buttons by Chris Deacy (@chrisdothtml) on CodePen.
なるほど。元々の色を抑えることで、よりホバー時に目立たせる作戦か。
See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.
メニューとかで使えそうな気もしないこともない。
See the Pen Creative Button Hover Collection by Yasin Softaoğlu (@ysoftaoglu) on CodePen.
個人的には、TYPE 3がタイプです。
See the Pen Hover.css by Ian Lunn (@IanLunn) on CodePen.
どんだけ〜ってくらい寄せ集めました感。
グラデーションを使ったアニメーションボタン
See the Pen Gradient text border background Button With Animation by Un mec qui code (@unmecquicode) on CodePen.
グラデーション×ネオン×アニメーション＝未知。
See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.
上のグラデーションのせいで（おかげで）、余計美しい。
See the Pen Button with gradient shadow by Mohsen Khakbiz (@Mohsen-Khakbiz) on CodePen.
いわゆる、蛇足です。
【番外編】珍しいアニメーションボタン
See the Pen Code Buttons by Simon Goellner (@simeydotme) on CodePen.
ひょっこりはん型。てかこれ、日本のオシャレ制作会社も使ってた気がする。
See the Pen Buttons with animated background by Giana (@giana) on CodePen.
これを使いこなせた人、マジリスペクト。
See the Pen Spin button by Ross B (@rocbear) on CodePen.
ハンドスピナー系のサイトで使うのかな？
See the Pen Imperfect Buttons by Tiffany Rayside (@tmrDevelops) on CodePen.
アニメーションではなくむしろボーダーで勝負してます型。
See the Pen CSS3 Button Hover Effects with FontAwesome by fox_hover (@fox_hover) on CodePen.
何故これが番外編なのか私が一番理解に苦しむ。
さいごに
現在、webデザインのトレンドはフラットデザインからはじまるフラット2.0やマテリアルデザイン、はたまたウルトラミニマム的なものまで。とにかく、表面的な見栄えは限りなくシンプルになっている。
そして、その風潮と相まって注目を集めるのが”アニメーションでの魅せ方”である。
表面はシンプルに、動きはヌルヌルに
である。
これだけCSSとブラウザが発達した今、使わない手はない。ボタンだけではなく、テキストリンクに応用するなり活用の幅は大いにあるだろう。
