調べたやり切った〜 ボタン専用CSSジェネレーター全集

3,007views／投稿 2013-04-27／更新 2019-02-05

手当たり次第ボタン用に使えるCSSジェネレーターだけをピックアップしました。

ボタンだけなので選び易いかと思います。特徴としてはカラープリセットがあるものが使い易いです。大体の色を選んで微調整すればいいだけなので。いい感じランキングで並べてあります。

6位と7位のテキスト周りの機能の無いものは下敷きエリアとして部分的にボタンに適用させることもできるし、逆にボタンジェネレーターで下敷き領域を作る事もできて便利です。5位以外全部海外サイトですね。

１位 CSS Button Generator - imageless css buttons maker

http://css-button-generator.com

1. カラープリセット
2. テキストシャドウ
3. ボックスシャドウ
4. ボーダー
5. 角丸
6. バックグラウンドグラデーション
7. マウスオーバー

2位 Css Gradient Button - create css button

http://cssgradientbutton.com

1. カラープリセット
2. テキストシャドウ
3. ボックスシャドウ
4. ボーダー
5. 角丸
6. バックグラウンドグラデーション
7. マウスオーバー

3位 CSS3 Button Generator

http://css3buttongenerator.com

1. テキストシャドウ
2. ボックスシャドウ
3. ボーダー
4. 角丸
5. バックグラウンドグラデーション
6. マウスオーバー

4位 Button Maker

http://css-tricks.com/examples/ButtonMaker/

1. テキストシャドウ
2. ボックスシャドウ
3. ボーダー
4. 角丸
5. バックグラウンドグラデーション
6. マウスオーバー

5位 CSS3 Button Generator

http://css3button.net

1. テキストシャドウ
2. ボックスシャドウ
3. ボーダー
4. 角丸
5. バックグラウンドグラデーション

6位 テキスト未考慮
CSS3 Rounded Corner Generator - CSS Portal

http://www.cssportal.com/css3-rounded-corner/

1. ボックスシャドウ
2. ボーダー
3. 角丸
4. バックグラウンドグラデーション

 

7位 テキスト未考慮
CSS3 Generator - By Peter Funk & Eric Hoffman

http://www.css3.me

1. ボックスシャドウ
2. ボーダー
3. 角丸
4. バックグラウンドグラデーション

やり切った。疲れた〜〜。