CSSで表現できる、ユニークなボタンデザインをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト、Codepenよりピックアップしてご紹介します。
コードを見ながらサンプルを確認することができるので、先日まとめたテキストエフェクトを含む、アニメーションを得意とした最先端のデザインテクニックを、今後のウェブデザイン制作に活かしてみてはいかがでしょう。
詳細は以下から。
CSS3の新しい可能性！美しいテキストエフェクト用コードスニペット24個まとめ
※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。
Collection of Button Hover Effects
CSS3で表現された、実践的に使えるボタンデザイン5つを収録しています。
See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.
アウトライン型ボタンに、さまざまなアニメーション10種類を加えたコンポーネントが揃います。
See the Pen Button Hover States by James Power (@thejamespower) on CodePen.
ボタンにカーソルを合わせるとキラリと光る、アウトライン型CSSボタン。
See the Pen Shiney Button by Jessica Biggs (@jlegosama) on CodePen.
ウェブサイトにアクセントを加える、シンプルなボタンホバーエフェクト。
See the Pen A fancy button by Andy Willekens. (@andywillekens) on CodePen.
カーソルを合わせることで、モコモコと泡が出ている様子を表現した、ユニークなボタンスタイリング。
See the Pen Blobs button by Nikolay Talanov (@suez) on CodePen.
まるでゼリーのような、ボヨンとした動きが楽しいボタンデザイン。
See the Pen Jelly button by ayamflow (@ayamflow) on CodePen.
Gelatin Over Button Effect with Sass
こちらもゼラチンのような、プルルンとした質感を表現できる、マウスホバーエフェクトが特長。
See the Pen Gelatin over button effect with Sass by François Lesenne (@macreart) on CodePen.
紙をペラッとめくったり、影付きでふわりと持ち上がる動きを、CSSのみで再現したボタンデザイン。
See the Pen 3D Paper button effects by Ashley Nolan (@ashleynolan) on CodePen.
マウスホバーでさまざまな色使いに展開される、アウトライン型アニメーションボタンセット。
See the Pen Colorful CSS Buttons by Chris Deacy (@chrisdothtml) on CodePen.
ボタンをクリックすると、アニメーションでパネル表示を行う、ユーサビリティにも優れたスタイリング。
See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.
こちらもクリックすることで、立体的に回転するCSS3アニメーションが目白押しのスタイリング。
See the Pen CSS3 3d flip button by Sean Michael (@seansean11) on CodePen.
3D Download Button w/ Meter Progress
作業進捗をプログレスバーで表現することができる、アニメーション豊かなボタン用スタイリング。
See the Pen 3D Download Button w/ Meter Progress by Terence Devine (@tdevine33) on CodePen.
Shifting Material Button Modal
マテリアルデザインの動きを意識したボタンで、クリックでアニメーション付きで展開するModalパネル。
See the Pen Shifting Material Button Modal by Ettrics (@ettrics) on CodePen.
ボタンクリックで読み込みローディングアニメーションが展開される、シンプルなミニマルスタイルが特長。
See the Pen Organic Button by Rik Schennink (@rikschennink) on CodePen.
マウスカーソルをボタンに合わせると、キラキラと輝くスパークリング・エフェクトが実装されています。
See the Pen Add a little magic! by Simon Goellner (@simeydotme) on CodePen.
マウスホバーをすることで、美しいグラデーションがアニメーション付きで変化します。
See the Pen Gradient Button by Eric Grucza (@egrucza) on CodePen.
太めのアウトラインがずれて表示される、あまり見かけないフラットスタイルのボタン素材。
See the Pen Off-registration button by Toshiyuki TAKAHASHI (@gau) on CodePen.
カーソルを合わせることでボタンサイズが変化し、文字テキストをフェードインで表示します。
See the Pen CSS Favourite Button by Jamie Coulter (@jcoulterdesign) on CodePen.
CSSアニメーションの特長を活かした、ちょっとしたエフェクトがクセになるホバーエフェクト。
See the Pen Button Hover Styles by Galen Strasen (@galefacekillah) on CodePen.
Button with Simple Effect on Hover!
シンプルなエフェクトですが、効果的に魅せることができる、ラインを使ったデザイン。
See the Pen Button with simple effect on hover! by Vincent Durand (@onediv) on CodePen.
CSS Only “Material Design” Animated Buttons
Googleのマテリアルデザインで採用されているボタンを、CSSのみで再現しています。
See the Pen CSS only “Material Design” Animated Buttons by Jon Brennecke (@jonbrennecke) on CodePen.
マウスホバーをすると、アイコンがくるりと回転する、立体的なアニメーションエフェクトが実装されています。
See the Pen Rotating Icon Buttons by Cole Waldrip (@colewaldrip) on CodePen.
中心に向かってサークル上に塗りつぶす、アニメーションを採用したボタンデザイン。
See the Pen Button Hover Animation by Chris Ota (@chrisota) on CodePen.
ボタンからグラデーション付きの波形を示すことで、どこをクリックしているのか分かりやすく伝えます。
See the Pen Simple Button Hover by Dominic Magnifico (@magnificode) on CodePen.
マウスオーバーすることで、ボタンだけでなく背景まで同じ色に変更する、シェアボタンを想定したデザイン。
See the Pen Animated Twitter Button by Scott Marshall (@ScottMarshall) on CodePen.
本物そっくりの影まで再現された、立体的なアニメーションが素敵な、Twitter用シェアボタン。
See the Pen Twitter Button Concept by Erik Deiner by fatihmusal (@fatihmusal) on CodePen.
Flying Twitter Bird Follow Button
画面右上に表示されたTwitterアイコンをクリックすると、パタパタと鳥が羽ばたく仕組みが素敵。残念ながらChrome非対応。
See the Pen Flying Twitter Bird Follow Button by Pankaj Parashar (@pankajparashar) on CodePen.
ボタンをクリックするたびに、ボタンが解剖されるという、ユニークなコンセプトデザイン。
See the Pen Button Anatomy by Brandon Durham (@brandondurham) on CodePen.
Button, Button, Who’s Got the Button
ボタンをクリックすると、縦方向に回転をはじめ、、。一部ブラウザには非対応となります。
See the Pen Button, button, who’s got the button by Jeff Ayer (@DeptofJeffAyer) on CodePen.
CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ
一緒に利用したい文字テキストのCSSエフェクト用サンプルコードをまとめています。
