これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール -CssGradientButton

記述が面倒なCSS3グラデーションを出来映えの確認をしながら、簡単に作成できるオンラインサービスを紹介します。

サイトのキャプチャ

CssGradientButton - create css button

ボタンは簡単に作成することができ、グラデーションのサンプルも数多く用意されています。
ボタンは、左:通常時、右:ホバー時です。

サイトのキャプチャ

あらかじめ用意されているサンプル

オリジナルのボタンを作成するには、「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>

top of page

©2017 coliss