見つけたのでメモ。
ちょっとボタンが必要になったときに便利。
詳細は以下公式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を吐き出してくれるという神サービス。
これは相当便利。今後めちゃくちゃお世話になりそう。いや、なります。笑