前回は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);
}

上記のコードで、このようなボタンができます。

Button Sample

 

対応ブラウザは下記の通りです。
Firefox/Safari/GoogleChrome

ボタンジェネレーターサイトを使えば
視覚的にかつ簡単に作ることもできて便利です。
http://css3button.net/

 
Recent Comment
Categories
Writer
  • hidetarou
  • acha_maro
  • gazza069
  • sin_ya
  • yossy222
  • marionnettezero
  • TUYO
  • shiovo
  • yani_arcana
  • momiji0510
  • keiko_www
  • toma_max
  • kyonmaru
  • __senta
  • kenzo
  • t_suzuki
  • hikari_f
  • macchii
  • mashu