CSS3を使い始めたころ色んなサイトを見てCSSで書かれたボタンをFireworksで作ってましたごめんなさい・・・
Fireworksで作るのが悪いわけではありませんが。
CSSで書くにしてもめんどくさかったりしますもん・・・
と言うわけでCSS Button Generatorの紹介。
CSS Button Generatorはテキスト(2行)、フォントサイズ、フォントカラー、テーマカラー、角丸、パディングをUI上で決めるだけでCSSを自動で出力してくれるサービスです。
ちなみに上のイメージ内のボタンのだと
.shiny-button { /*これがボタン本体*/
display: inline-block;
text-align: center;
border-width: 1px;
border-style: solid;
text-transform: uppercase;
text-decoration: none;
line-height: 1.1;
font-weight: normal;
font-family: sans-serif;
color: #FFFFFF;
font-size: 11px;
background-color: #006AA8;
background-image: -webkit-linear-gradient(top, #006dad 0%, #157ebc 48%, #006AA8 49%, #006AA8 82%, #007cc4 100%);
background-image: -moz-linear-gradient(top, #006dad 0%, #157ebc 48%, #006AA8 49%, #006AA8 82%, #007cc4 100%);
background-image: -o-linear-gradient(top, #006dad 0%, #157ebc 48%, #006AA8 49%, #006AA8 82%, #007cc4 100%);
background-image: linear-gradient(top, #006dad 0%, #157ebc 48%, #006AA8 49%, #006AA8 82%, #007cc4 100%);
border-color: hsl(202, 39%, 33%);
-webkit-box-shadow: inset 0 0 1px 1px #009dfa, 0 0 1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 1px 1px #009dfa, 0 0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0 1px 1px #009dfa, 0 0 1px 3px rgba(0, 0, 0, 0.15);
-webkit-text-shadow: 1px 1px 1px #002a42;
-moz-text-shadow: 1px 1px 1px #002a42;
-o-text-shadow: 1px 1px 1px #002a42;
text-shadow: 1px 1px 1px #002a42;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 15.600000000000001px 39px 15.600000000000001px 39px;
}
.shiny-button strong { /*ボタン内の1行目のテキストのスタイル*/
letter-spacing: 1px;
font-size: 15px;
}
.shiny-button:hover { /*オンマウス時*/
color: #FFFFFF;
background-color: #0074b7;
background-image: -webkit-linear-gradient(top, #0077bc 0%, #1688c9 48%, #0074b7 49%, #0074b7 82%, #0086d3 100%);
background-image: -moz-linear-gradient(top, #0077bc 0%, #1688c9 48%, #0074b7 49%, #0074b7 82%, #0086d3 100%);
background-image: -o-linear-gradient(top, #0077bc 0%, #1688c9 48%, #0074b7 49%, #0074b7 82%, #0086d3 100%);
background-image: linear-gradient(top, #0077bc 0%, #1688c9 48%, #0074b7 49%, #0074b7 82%, #0086d3 100%);
border-color: hsl(202, 40%, 36%);
-webkit-box-shadow: inset 0 0 1px 1px #04a3ff, 0 0 1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 1px 1px #04a3ff, 0 0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0 1px 1px #04a3ff, 0 0 1px 3px rgba(0, 0, 0, 0.15);
-webkit-text-shadow: 1px 1px 1px #003351;
-moz-text-shadow: 1px 1px 1px #003351;
-o-text-shadow: 1px 1px 1px #003351;
text-shadow: 1px 1px 1px #003351;
}
.shiny-button:active { /*アクティブ時*/
color: #FFFFFF;
background-color: #006099;
background-image: -webkit-linear-gradient(top, #005a8f 0%, #006AA8 100%);
background-image: -moz-linear-gradient(top, #005a8f 0%, #006AA8 100%);
background-image: -o-linear-gradient(top, #005a8f 0%, #006AA8 100%);
background-image: linear-gradient(top, #005a8f 0%, #006AA8 100%);
padding: 16.6px 39px 14.600000000000001px 39px;
}
と、こんな感じになります。
一応コメント入れておきましたのでCSSリテラシーのある方はお分かりかと思います。
では実際のhtmlはどう記述するか。
こんな感じ。
なーラクだろーがー。
こういうツールを使ってCSS3の勉強なんてのもいいんじゃないかとね。
【追記】
CSS内「.shiny-button」と「.shiny-button:active」の、それぞれ最終行のpaddingの値が大変なことになってますね・・・
ドット以下の数字は消しても構いませんけど、値を大きく変更するとアクティブ時にボタンの高さが変わってしまって気持ち悪くなりますので、気をつけて！
