2011.03.31 shiovo
前回はPhotoshopで簡単なボタンの作り方(見てない方はコチラから)を書きましたが、
CSS3だけでも同じようなグラデーションのかかったボタンが再現できます。
CSS3でできること
・グラデーションをつける
・角を丸くする
・ボタンに影をつける
・ボタン内に光彩をつける
・文字に影をつける
【html】
Button Sample
【CSS】
a.btn { font-weight:bold; color: #ffffff; padding: 7px 15px; text-decoration:none; background: -moz-linear-gradient(top,#c141a4 0%,#c146a0 50%,#a80076 50%,#db34a3); background: -webkit-gradient(linear, left top, left bottom, from(#42aaff),color-stop(0.50, #c146a0),color-stop(0.50, #a80076),to(#db34a3)); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #ae037b; -moz-box-shadow:0px 1px 3px rgba(153,153,153,0.5),inset 0px 0px 3px rgba(255,255,255,1); -webkit-box-shadow:0px 1px 3px rgba(153,153,153,0.5),inset 0px 0px 3px rgba(255,255,255,1); text-shadow:0px -1px 0px rgba(0,0,0,0.3),0px 1px 0px rgba(255,255,255,0.5); }
上記のコードで、このようなボタンができます。
対応ブラウザは下記の通りです。
Firefox/Safari/GoogleChrome
ボタンジェネレーターサイトを使えば
視覚的にかつ簡単に作ることもできて便利です。
http://css3button.net/