CSS3のみで作るボタンのフレームワーク。
以前にも似たようなものがありましたけど、
CSS3 Buttonize Frameworkは軽量で、
使いやすそうだったのでメモがてらご紹介
します。やはり管理が楽なのは魅力ですね・・
class名を与えるだけでデザインを変更できる、というCSS3のボタンフレームワークです。class名を変えるだけでデザインも変更できるので、手軽に実装出来ていいんじゃないでしょうか。
CSS3 Buttonize Framework
軽量なフレームワークだよ!とのことです。デザインもシンプルで個人的に好みでした。何と比べて軽量なのかな?
サンプル
適当ですみませんけどサンプルです
CSS
.button { font : 14px / 36px "Droid Sans" , sans-serif ; height : 36px ; border : 2px solid #333 ; padding : 5px 14px ; margin : 0 6px ; text-shadow : 1px 1px 1px #FFF ; -webkit- border-radius : 6px ; -moz- border-radius : 6px ; border-radius : 6px ; -moz- box-shadow : 1px 1px 6px rgba ( 255 , 255 , 255 , 0.3 ); -webkit- box-shadow : 1px 1px 6px rgba ( 255 , 255 , 255 , 0.3 ); box-shadow : 1px 1px 6px rgba ( 255 , 255 , 255 , 0.3 ); background-color : #e0e0e0 ; background-image : url (images/gradm 2 acc.png); background-image : -moz- linear-gradient ( top , #f7edff , #b1b1b1 ); background-image : -webkit-gradient( linear , center top , center bottom , from( #f7edff ), to( #b1b1b1 )); background-image : -webkit- linear-gradient ( top , #f7edff , #b1b1b1 ); background-image : -o- linear-gradient ( top , #f7edff , #b1b1b1 ); background-image : linear-gradient ( top , #f7edff , #b1b1b1 ); -moz- background-clip : padding; -webkit- background-clip : padding-box; background-clip : padding-box; } .button:link, .button:visited, .button:hover { color : #444 ; text-decoration : none ; } .button:hover { background-image : -moz- linear-gradient ( top , #f5f5ff , #999999 ); background-image : -webkit-gradient( linear , center top , center bottom , from( #f5f5ff ), to( #999999 )); background-image : -o- linear-gradient ( top , #f5f5ff , #999999 ); background-image : linear-gradient ( top , #f5f5ff , #999999 ); } .button:active, .button:focus { background-image : -moz- linear-gradient ( top , #999999 , #e5d9ff ); background-image : -webkit-gradient( linear , center top , center bottom , from( #999999 ), to( #e5d9ff )); background-image : -o- linear-gradient ( top , #999999 , #e5d9ff ); background-image : linear-gradient ( top , #999999 , #e5d9ff ); } |
ボタン全体のデザイン
.big { font-size : 18px ; line-height : 42px ; padding : 7px 23px ; -webkit- border-radius : 8px ; -moz- border-radius : 8px ; border-radius : 8px ; } |
あとはこうして個別のデザインを作っておくとマークアップが楽です。
< a href = "#" class = "button big" 大きいボタン</a> |
こういったフレームワークを参考に、自分用のフレームワークを作っておくと作業効率も上がるかも知れません。気が向いたら作ってみますかね・・ライセンスはクリコモだそうです。