Home » Learning » Web制作 » 動きのキレイなCSSボタン&ナビゲーションの作り方

動きのキレイなCSSボタン&ナビゲーションの作り方


いよいよ本格的に増えてきたHTML5×CSS3。ボタンやナビゲーションのバリエーションもたくさんあってとても勉強になります。デモやソースダウンロードもあるのでぜひ参考にしてみてください。

 

 

吹き出しが浮かび上がるボタン
マウスをかざした時、ふわっと吹き出しが浮き出ます。とても動きがキレイ。デザインもきれいで参考になります。

>>ソースはコチラ  |  Demo

 

 

Appleナビゲーション
Apple風のナビゲーション。微妙な色使いがシンプルできれいです。

>>ソースはコチラ | Demo

 

 

ドロップダウンナビゲーション
動きがとても軽快。マウスがさしている部分もわかりやすいのでユーザビリティもとてもいいナビゲーションです。

>>ソースはコチラ | Demo

 

 

どんなサイトにも合いそうなシンプルでクオリティの高いボタン
さりげないデザインですが、押したくなるデザイン。ロールオーバー時の色の変化もきれいです。

>>ソースはコチラ | Demo

 

 

思わず押したくなる動きをするボタン
クリックするとボタンがぴょこっと下がります。思わず押したくなる挙動が上手いボタン。

>>ソースはコチラ | Demo

 

 

動き&デザインのバリエーションが選べるボタン
こちらもクリック時にかわいい動きをします。デモも5パターンあるのでぜひ見てみてください。

Tutorial | Demo 1 | Demo 2 | Demo 3 | Demo 4 | Demo 5

 

 

影の使い方が上手いボタン
数字を残してプッシュされます。影を上手く使っているところも参考になります。

Tutorial | Demo

 

 

ふわっと押される感覚が心地いいボタン
クリックした時の動きの滑らかさ、周りの影の動きなど、、とても勉強になります。

Tutorial | Demo

 

 

お菓子みたいなかわいいボタン
html、CSSファイルがダウンロードできます。ボタンの押す動作が滑らかです。色もパステルカラーでかわいい

>>ソース&Demoはコチラ
→確認してみたらリンク先が消されているみたいです。。復活したら再リンクします。

 

まとめ

デザインやソースをみるだけでもとても勉強になります。いろいろなバリエーションをストックしておくことで、デザインの幅も広がりそうです。
Webデザイナーの方、ぜひご活用ください。

 


 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>