【CSS】ボタンジェネレーターをつかってボタンUIのCSS実装

こんにちは。
今回はひとつジェネレーターをご紹介。

Buttonのデザイン

See the Pen myEWYM by Tsukasa Nagata (@nt-uni) on CodePen.0

みなさんボタンはどうやってつくりますか?
一つボタン用の共通クラスをつくっておいて、適用させる形が多いですよね。

意外と細かいボタンUI

でもよくよく見ると、1pxのハイライト、1pxのシャドウ、最近のボタンUIはグラデーションだけでなく細部に拘ったUIが多いです。この1pxの差が質感をガラリと変えます。

上のサンプルでも、CSSは以下の様な感じです。

.classname {
     -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
     -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
     box-shadow:inset 0px 1px 0px 0px #ffffff;
     background-color:#ededed;
     -webkit-border-top-left-radius:6px;
     -moz-border-radius-topleft:6px;
     border-top-left-radius:6px;
     -webkit-border-top-right-radius:6px;
     -moz-border-radius-topright:6px;
     border-top-right-radius:6px;
     -webkit-border-bottom-right-radius:6px;
     -moz-border-radius-bottomright:6px;
     border-bottom-right-radius:6px;
     -webkit-border-bottom-left-radius:6px;
     -moz-border-radius-bottomleft:6px;
     border-bottom-left-radius:6px;
     text-indent:0;
     border:1px solid #dcdcdc;
     display:inline-block;
     color:#777777;
     font-family:arial;
     font-size:15px;
     font-weight:bold;
     font-style:normal;
     height:50px;
     line-height:50px;
     width:100px;
     text-decoration:none;
     text-align:center;
     text-shadow:1px 1px 0px #ffffff;
}.classname:hover {
     background-color:#dfdfdf;
}.classname:active {
     position:relative;
     top:1px;
}

ベンダープレフィックス(FirefoxやChromeそれぞれ対応させるための接頭辞)があるため重複している記述もありますが、意外と細かいプロパティ指定がされているのがお分かりだと思います。

元からパターンを作っておけばいいんですけど、手間ですよね。

そんなときにはジェネレーター

Screen-Shot-2014-12-18-at-12.03.35

CSS Button Generator | Create CSS3 buttons with our CSS button maker

こちらのサイトでは、プレビューで確認しながらCSSを生成できるボタン専用ジェネレーターです。
フラットなのかグラデーションなのか、またBorderやShadowなどを決めていきボタンを生成します。

まとめ

こういったジェネレーターは各種あるんですが、一番カスタマイズ性があったのでご紹介しました。
その他にも様々な用途でジェネレーターがありますので、逐次ご紹介していきたいと思います!

フォローして続編をチェック

@universionsをフォロー