CSS3グラデーションと角丸を使ったボタンを簡単に作成できるジェネレーター

ウェブサービス

CSS3グラデーションのツールとしてだけでも便利そうな、ボタンを確認しながら作成できるオンラインサービスを紹介します。

CSS Corners, CSS3 Gradient

ボタンの作成は簡単で、3ステップで完了します。

Step 1:角丸の設定

ボタンの四隅の角丸を設定します。
キャプチャは20px。

Step 2:グラデーションの設定

グラデーションのカラーと方向を設定します。

Step 3:余白の設定

ボタンとテキストの余白を設定します。

スタイルシートの生成

上記の三つの設定はリアルタイムにボタンのプレビューに反映され、スタイルシートも自動で生成されます。

CSS

上記設定のスタイルシート。

element {
	-moz-border-radius: 20px 20px 20px 20px;
	-webkit-border-radius: 20px 20px 20px 20px;
	padding: 20px;
	background: -moz-linear-gradient(center top, #999999 23%,#ffffff 93%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.23, #999999),color-stop(0.93, #ffffff));
}