見つけたのでメモ。
ちょっとボタンが必要になったときに便利。
詳細は以下公式URLを参照されたし。
http://css-button-generator.com/
例えばこんなようなボタンが簡単につくれる。
生成された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を吐き出してくれるという神サービス。
これは相当便利。今後めちゃくちゃお世話になりそう。いや、なります。笑