これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール -CssGradientButton
Post on:2012年4月25日
sponsors
記述が面倒なCSS3グラデーションを出来映えの確認をしながら、簡単に作成できるオンラインサービスを紹介します。
CssGradientButton - create css button
[ad#ad-2]
ボタンは簡単に作成することができ、グラデーションのサンプルも数多く用意されています。
ボタンは、左：通常時、右：ホバー時です。
あらかじめ用意されているサンプル
[ad#ad-2]
オリジナルのボタンを作成するには、「Edit Button」をクリックします。
編集パネルでは、ボタンのテキストをはじめ、サイズ、角丸、余白などの形状や、グラデーションを簡単な操作で変更できます。
パネル左：ボタンの形状の編集
グラデーションも変更したら、即時にボタンに反映されます。
パネル右：グラデーションやシャドウなどの編集
作成が完了したら、コードを下部に生成されます。
生成されるコードは下記のようになっています。
<!DOCTYPE html><html><head>
<style type="text/css">
.button_example{
border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #a5b8da;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5b8da), color-stop(100%, #7089b3));
background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
background-image: linear-gradient(top, #a5b8da, #7089b3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a5b8da, endColorstr=#7089b3);
}
.button_example:hover{
border:solid 1px #819bcb; background-color: #819bcb;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#819bcb), color-stop(100%, #536f9d));
background-image: -webkit-linear-gradient(top, #819bcb, #536f9d);
background-image: -moz-linear-gradient(top, #819bcb, #536f9d);
background-image: -ms-linear-gradient(top, #819bcb, #536f9d);
background-image: -o-linear-gradient(top, #819bcb, #536f9d);
background-image: linear-gradient(top, #819bcb, #536f9d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#819bcb, endColorstr=#536f9d);
}
</style></head>
<body>
<form> <input type="button" class="button_example" value="ボタン" /> </form>
</body>
</html>
sponsors
