Asial Blog

Recruit! Asialで一緒に働きませんか?

CSSだけで作るアイコン付きボタンの作り方

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
デザイン
ボタン
こんにちは、鴨田です。

近頃はボタンのデザインに限らず、CSSで実現できるものは、
グラフィックにせず、CSSだけで書いています。

ボタンデザインに限らず、HTML/CSSで書いた方が効率的なこもあって、
最近はあまりPhotoshopを開くこともなくなってきています。

ということで、本日はCSSだけで作るアイコン付きボタンの作り方です。
アイコン付きというのがポイントです。



● アイコンなしボタン


とりあえず、アイコンなしで作りましょう。

HTML
  1. <body>
  2.   <a href="#" class="button normal">ボタン</a>
  3. </body>
CSS
  1. body {
  2.   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  6.  
  7. a {  
  8.   /* サイズ指定 */
  9.   width: 200px;
  10.   height: 50px;
  11.   display: block;
  12.   box-sizing: border-box;
  13.   margin: 20px;
  14.   
  15.   /* 縦横中央揃え */
  16.   text-align: center;
  17.   line-height: 50px;
  18.   
  19.   /* 色指定 */
  20.   background-image: -webkit-linear-gradient(top, #FC0, #F60);
  21.   border: 2px solid #F33;
  22.   color: #FFF;
  23.   
  24.   /* 角丸 */
  25.   border-radius: 25px;
  26.   
  27.   /* シャドウ / ベベル */
  28.   box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(255, 255, 255, 0.9) inset, 0 -1px 3px rgba(0, 0, 0, 0.1) inset;
  29.   
  30.   /* その他 */
  31.   text-decoration: none;
  32.   font-size: 24px;
  33.   
  34. }
  35.  
  36. a:hover {
  37.   /* 反転 */
  38.   background-image: -webkit-linear-gradient(top, #F60, #FC0);
  39. }


デモページ

こんな感じでしょうかね。
ボタンとしては十分に機能していると思います。



● アイコン付きボタン その1


単純に文字の横に、アイコンを置きたい場合はimgタグで表現したり、
spanタグを使ってもいいと思います。

  1. <body>
  2.   <a href="#" class="button normal"><img src="arrow.png" class="arrow" />IMGタグ</a>
  3.   <a href="#" class="button normal"><span class="arrow"></span>SPANタグ</a>
  4. </body>
CSS
  1. a img.arrow {
  2.   width: 24px;
  3.   height: 24px;
  4.   display: inline-block;
  5.  
  6.   /* 位置合わせ用 */
  7.   vertical-align: middle;
  8.   margin: 0 10px 5px 0;
  9. }
  10.  
  11. a span.arrow {
  12.   width: 24px;
  13.   height: 24px;
  14.   background-image: url(arrow.png);
  15.   background-size: 24px 24px;
  16.   display: inline-block;
  17.   text-indent: -9999px;
  18.  
  19.   /* 位置合わせ用 */
  20.   vertical-align: middle;
  21.   margin: 0 10px 5px 0;
  22. }


デモページ

imgとかspanで入れた際に、微妙にずれるので、ちょっと位置合わせする必要があります。

また、この方法で作った場合の問題点として、
アイコン+文字でのセンター揃えなので、アイコンの位置が変わってしまい、
ボタンを縦に並べる様なデザインだと、統一感がなくなるということがあり得ます。

なので、次はアイコンの位置を固定したい場合を考えてみます。



● アイコン付きボタン その2


アイコンを左位置に固定したいと思います。

  1. <body>
  2.   <a href="#" class="button i-left1">ボタン</a>
  3.   <a href="#" class="button i-left2">ボタン</a>
  4. </body>
CSS
  1. a.button.i-left1 {
  2.   background-image: url(arrow.png), -webkit-linear-gradient(top, #FC0, #F60);
  3.   background-repeat: no-repeat, no-repeat;
  4.   background-position: left 10px center, 0 0;
  5.   background-size: 24px 24px, contain;
  6. }
  7.  
  8. a.button.i-left1:hover {
  9.   background-image: url(arrow.png), -webkit-linear-gradient(top, #F60, #FC0);
  10. }
  11.  
  12. a.button.i-left2 {
  13.   position: relative;
  14. }
  15.  
  16. a.button.i-left2:before {
  17.   position: absolute;
  18.   content: "";
  19.   width: 24px;
  20.   height: 24px;
  21.   top: 50%;
  22.   left: 10px;
  23.   margin: -12px 0 0 0;
  24.   background-image: url(arrow.png);
  25.   background-repeat: no-repeat;
  26.   background-size: 24px 24px;
  27. }


デモページ

前者(a.button.i-left1)は背景画像の一部として、アイコンを表現しています。
この場合、一点、難があります。
PCブラウザでは、特に問題なく見られると思いますが、
スマートフォンの一部ブラウザで見ると、表示が崩れます。
原因は下記CSS部分です。
CSS3で拡張されたbackground-positionが解釈されないようです。
(横方向は左端から10px、縦方向は中央揃え)

  1. background-position: left 10px center;

なので、もし前者の方を採用する場合は、
画像にあらかじめマージンまで含める必要があります。

それが面倒な場合などは、後者(a.button.i-left2)の実装をおすすめします。
こちらであれば、モバイルブラウザでも崩れることはありません。

また、アイコン自体を背景画像として表現するのではなく、
ウェブフォントにしてしまうということも出来ます。

もうアイコン画像はいらない! Webフォントを使って、iOS風タブバーとアイコンを作成する方法
昔の自分の記事ですが、参考までに。

:beforeや:after議事要素を応用すると、いろいろな表現が可能です。
例として、当ブログから以下の記事をご紹介します。
CSSだけで簡単に吹き出しを作成する方法4つ!



以上です。

これから、フラットデザインが流行ってくると、
ボタンの質感よりも、ボタンのアイコンに重点が置かれるようになると思いますので、
そのようなときに役立てばいいかなと思います。

例えばこんな。


デモページ

コメント

  • 村田茂明

    丁寧な説明と分かりやすいコード記述で、非常に勉強になりました。この記事を参考にさせていただき、自分のページに気に入ったボタンを作り付ける事が出来ました。ありがとうございます。

  • 鴨田

    村田様

    少しでも役立てたようで、この記事を書いた甲斐がありました。
    また当ブログを閲覧いただければ、嬉しい限りです!

  • ukik

    参考になりました。
    フラットデザインのボタンはシンプルで使い勝手がいいです。

  • 鴨田

    ukik様

    参考になったようで何よりです。
    フラットデザインが流行るにつれ、アイコンが欠かせなくなると思うので、
    いろいろと活用してもらえたらと思います。

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事