グラデーションや角丸等cssだけで実装する時に手打ちしてるとけっこう大変なので、ジェネレータを使わせていただいております。
コードを自動生成してくれるので、初心者の方でもコピペで実装できます。
ジェネレーターのほとんどが海外サイトで英語のみというケースが多いです。その分、初めて使う方にはハードルが高くなってしまうのですが、使い方を覚えてしまえばコピペで簡単にボタンが作れるようになります。
ボタンを画像で作らないわけ
以前は、ボタンは画像で作っていました。
今でも画像で作るものもあるのですが、cssだけで実装できれば楽なんです。
なぜ、楽かというと、スマホへの最適化を行う場合やボタンのテキストを変更する時に、ボタンを作り直す必要がなく、全部コードですぐに修正できてしまいます。
ジェネレーターって何？
ジェネレーターというのは、平たく言うと、指定した条件によってコードを自動で生成してくれる仕組みのことです。
htmlやcssのコードを知らなくても、項目を選んでいくだけでコードを生成してくれるので、生成されたコードをコピペするだけでいいんです。
もちろん、どこにコピペするか…ということは知っておかなければなりませんが。
CSS3 Button Generator
項目を設定するだけで、右側にコードが生成されていきます。
・BACKGROUND：背景色。ここではグラデーションの背景が自動で作成できます。
≪BORDER / PADDING≫
・COLOR：枠線の色
・WIDTH：枠線の線幅
・RADIUS：角丸の丸み
・TOP+BOTTOM：文字の上下の余白
・LEFT+RIGHT：文字の左右の余白
≪DROP SHADOW≫
・COLOR：ボタン自体の影の色
・OPACITY：影の透明度（数字が1に近くなるほど、影が濃くなります）
・xとy：上下左右の位置
・size：影の長さ
≪INNER SHADOW≫
COLOR：ボタンの内側の影の色
・OPACITY：影の透明度（数字が1に近くなるほど、影が濃くなります）
・xとy：上下左右の位置
・size：影の長さ
≪TEXT FONT≫
・COLOR：文字の色
・size：文字の大きさ
≪TEXT SHADOW 1（2）≫
1と2は文字の上下に2つの影（光）がついているので、それを設定できます。
・OPACITY：影の透明度（数字が1に近くなるほど、影が濃くなります）
・xとy：上下左右の位置
・size：影の長さ
サイト：http://css3button.net/
他のユーザーが作ったボタンのデータが見たい方向けのページも用意されています。
http://css3button.net/showcase/
Grad3
日本人の方が作成されたジェネレーターサイトです。
このジェネレーターについては、詳しく解説されているサイトがありましたので、そちらを参照ください。
サイト：http://grad3.ecoloniq.jp/
参考サイト：http://weboook.blog22.fc2.com/blog-entry-327.html
