TOP  >  WebDesign  >  CSSで実現するボタンテクニック集「22 CSS Button Styling Tutorials and Techniques」
2009年05月29日

CSSで実現するボタンテクニック集「22 CSS Button Styling Tutorials and Techniques」

Designdevelopでは今まで様々なCSSテクニックをお伝えしてきましたが、今日紹介する「22 CSS Button Styling Tutorials and Techniques」はボタンのデザインに特化したテクニック集です。

cssbutton01
Beautiful CSS buttons with icon set

立体的なボタンから、角丸はもちろん影がついたものなどなどCSSで作る手のこんだボタンのテップスやチュートリアルが収録されています。今日はその中からいくつかピックアップして紹介したいと思います。

詳しくは以下

How to make sexy buttons with CSS
立体的で角丸のスタンダードなボタン。背景画像を切り分ける事で横幅を可変できます。

cssbutton02
 
 
 
 
 
Liquid & Color Adjustable CSS Buttons
カラフルで立体的、さらに横幅可変可能なCSSで作るボタン。

cssbutton03
 
 
 
 
 
Pure CSS Buttons
CSSのみで作るから降るでラウンドなボタンをつくるためのテクニック。

cssbutton04
 

上記の他にも様々なCSSでつくるボタンが公開されています。作りもそこまで複雑ではなくシンプルな作りになっていますので、独自の応用や、自分自身の色を付け加える事も簡単にできるかと思います。ボタンをすべて画像で作っていたと言う方は一度見てみると幅が広がるかと思います。

22 CSS Button Styling Tutorials and Techniques : Speckyboy Design Magazine

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 10:00  |  
Category: WebDesign   
tag: webdesign

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る