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.

 

 

 

Button Hover States

アウトライン型ボタンに、さまざまなアニメーション10種類を加えたコンポーネントが揃います。

See the Pen Button Hover States by James Power (@thejamespower) on CodePen.

 

 

 

Shiney Button

ボタンにカーソルを合わせるとキラリと光る、アウトライン型CSSボタン。

See the Pen Shiney Button by Jessica Biggs (@jlegosama) on CodePen.

 

 

 

A Fancy Button

ウェブサイトにアクセントを加える、シンプルなボタンホバーエフェクト。

See the Pen A fancy button by Andy Willekens. (@andywillekens) on CodePen.

 

 

 

Blobs Button

カーソルを合わせることで、モコモコと泡が出ている様子を表現した、ユニークなボタンスタイリング。

See the Pen Blobs button by Nikolay Talanov (@suez) on CodePen.

 

 

 

Jelly Button

まるでゼリーのような、ボヨンとした動きが楽しいボタンデザイン。

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.

 

 

 

3D Paper Button Effect

紙をペラッとめくったり、影付きでふわりと持ち上がる動きを、CSSのみで再現したボタンデザイン。

See the Pen 3D Paper button effects by Ashley Nolan (@ashleynolan) on CodePen.

 

 

 

Colorful CSS Buttons

マウスホバーでさまざまな色使いに展開される、アウトライン型アニメーションボタンセット。

See the Pen Colorful CSS Buttons by Chris Deacy (@chrisdothtml) on CodePen.

 

 

 

Flipside

ボタンをクリックすると、アニメーションでパネル表示を行う、ユーサビリティにも優れたスタイリング。

See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.

 

 

 

CSS3 3D Flip Button

こちらもクリックすることで、立体的に回転する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.

 

 

 

Organic Button

ボタンクリックで読み込みローディングアニメーションが展開される、シンプルなミニマルスタイルが特長。

See the Pen Organic Button by Rik Schennink (@rikschennink) on CodePen.

 

 

 

Add a Little Magic

マウスカーソルをボタンに合わせると、キラキラと輝くスパークリング・エフェクトが実装されています。

See the Pen Add a little magic! by Simon Goellner (@simeydotme) on CodePen.

 

 

 

Gradient Button

マウスホバーをすることで、美しいグラデーションがアニメーション付きで変化します。

See the Pen Gradient Button by Eric Grucza (@egrucza) on CodePen.

 

 

 

Off-registration Button

太めのアウトラインがずれて表示される、あまり見かけないフラットスタイルのボタン素材。

See the Pen Off-registration button by Toshiyuki TAKAHASHI (@gau) on CodePen.

 

 

 

CSS Favorite Button

カーソルを合わせることでボタンサイズが変化し、文字テキストをフェードインで表示します。

See the Pen CSS Favourite Button by Jamie Coulter (@jcoulterdesign) on CodePen.

 

 

 

Button Hover Styles

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.

 

 

 

Rotating Icon Buttons

マウスホバーをすると、アイコンがくるりと回転する、立体的なアニメーションエフェクトが実装されています。

See the Pen Rotating Icon Buttons by Cole Waldrip (@colewaldrip) on CodePen.

 

 

 

Button Hover Animation

中心に向かってサークル上に塗りつぶす、アニメーションを採用したボタンデザイン。

See the Pen Button Hover Animation by Chris Ota (@chrisota) on CodePen.

 

 

 

Simple Button Hover

ボタンからグラデーション付きの波形を示すことで、どこをクリックしているのか分かりやすく伝えます。

See the Pen Simple Button Hover by Dominic Magnifico (@magnificode) on CodePen.

 

 

 

Animated Twitter Button

マウスオーバーすることで、ボタンだけでなく背景まで同じ色に変更する、シェアボタンを想定したデザイン。

See the Pen Animated Twitter Button by Scott Marshall (@ScottMarshall) on CodePen.

 

 

 

Twitter Button Concept

本物そっくりの影まで再現された、立体的なアニメーションが素敵な、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.

 

 

 

Button Anatomy

ボタンをクリックするたびに、ボタンが解剖されるという、ユニークなコンセプトデザイン。

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エフェクト用サンプルコードをまとめています。

 

 

サムネイル@ : Collection of Button Hover Effect – Codepen.io