【CSS】リッチなデザインのボタンを生成してくれるサービス。

見つけたのでメモ。

ちょっとボタンが必要になったときに便利。

詳細は以下公式URLを参照されたし。
http://css-button-generator.com/

例えばこんなようなボタンが簡単につくれる。

hogepiyo

生成されたCSSは以下の通り。

.original-btn {
	font-size:22px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:42px;
	-webkit-border-radius:42px;
	border-radius:42px;
	border:0px solid #83c41a;
	padding:5px 40px;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(35%, #9dce2c), color-stop(70%, #8cb82b) );
	background:-moz-linear-gradient( center top, #9dce2c 35%, #8cb82b 70% );
	background:-ms-linear-gradient( top, #9dce2c 35%, #8cb82b 70% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
	background-color:#9dce2c;
	color:#ffffff;
	display:inline-block;
	text-shadow:0px 0px 20px #689324;
 	-webkit-box-shadow:inset 0px 0px 0px 0px #c1ed9c;
 	-moz-box-shadow:inset 0px 0px 0px 0px #c1ed9c;
 	box-shadow:inset 0px 0px 0px 0px #c1ed9c;
}
.original-btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(35%, #8cb82b), color-stop(70%, #9dce2c) );
	background:-moz-linear-gradient( center top, #8cb82b 35%, #9dce2c 70% );
	background:-ms-linear-gradient( top, #8cb82b 35%, #9dce2c 70% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c');
	background-color:#8cb82b;
}
.original-btn:active {
	position:relative;
	top:1px;
}

colorTheme、border-radius、shadow、gradient、size、といったパラメーターをマウスで選択し、ボタンの文字列、クラス名、フォントを選択するだけで自動的にCSSを吐き出してくれるという神サービス。

これは相当便利。今後めちゃくちゃお世話になりそう。いや、なります。笑