コピペでつかえるcss3ボタンサンプル

使い回しがきくのにソースメモしてないから、毎回効率悪いわ…
ということで、個人的にもよく使うデザイン3つでメモしておこうかと思います。

※ただし、IEは除く

IEは除外しました。
ちゃんと調べてないけど、IE対応がややこしい気がするので(6,7,8,9,10バージョン毎に違うんやろか…)

それ以外のブラウザも今回は最新バージョンで確認していますので、
古いバージョンも対応するなら、ベンダープレフィックス追加した方がいいと思います。

参考:http://fmbip.com/litmus/

グラデーションの設定(linear-gradient)

グラデーションは特にがっつり設定してると野暮ったくなるので、
あんまり変わらないかな…?というくらいにしてます。

角丸(border-radius)

これもやりすぎると野暮ったくなるので控えめで。
少し丸みをつける程度(5px位まで)か完全に丸形にしてしまう。(50%)

難しいものはジェネレーターで生成

私はグラデーションの記述がなかなか覚えられないので、
ジェネレーターで生成してから、カスタマイズしてます。

参考:http://css3button.net/