アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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

こんにちは、鴨田です。

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

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

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



● アイコンなしボタン


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

HTML


<body>
  <a href="#" class="button normal">ボタン</a>
</body>

CSS


body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
  margin: 0;
  padding: 0;
}

a {  
  /* サイズ指定 */
  width: 200px;
  height: 50px;
  display: block;
  box-sizing: border-box;
  margin: 20px;
  
  /* 縦横中央揃え */
  text-align: center;
  line-height: 50px;
  
  /* 色指定 */
  background-image: -webkit-linear-gradient(top, #FC0, #F60);
  border: 2px solid #F33;
  color: #FFF;
  
  /* 角丸 */
  border-radius: 25px;
  
  /* シャドウ / ベベル */
  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;
  
  /* その他 */
  text-decoration: none;
  font-size: 24px;
  
}

a:hover {
  /* 反転 */
  background-image: -webkit-linear-gradient(top, #F60, #FC0);
}



デモページ

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



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


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



<body>
  <a href="#" class="button normal"><a href="https://www.asial.co.jparrow.png &mode=1" class="popupimg"><img src="https://www.asial.co.jparrow.png"></a>IMGタグ</a>
  <a href="#" class="button normal"><span class="arrow">></span>SPANタグ</a>
</body>

CSS


a img.arrow {
  width: 24px;
  height: 24px;
  display: inline-block;

  /* 位置合わせ用 */
  vertical-align: middle;
  margin: 0 10px 5px 0;
}

a span.arrow {
  width: 24px;
  height: 24px;
  background-image: url(arrow.png);
  background-size: 24px 24px;
  display: inline-block;
  text-indent: -9999px;

  /* 位置合わせ用 */
  vertical-align: middle;
  margin: 0 10px 5px 0;
}



デモページ

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

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

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



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


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



<body>
  <a href="#" class="button i-left1">ボタン</a>
  <a href="#" class="button i-left2">ボタン</a>
</body>

CSS


a.button.i-left1 {
  background-image: url(arrow.png), -webkit-linear-gradient(top, #FC0, #F60);
  background-repeat: no-repeat, no-repeat;
  background-position: left 10px center, 0 0;
  background-size: 24px 24px, contain;
}

a.button.i-left1:hover {
  background-image: url(arrow.png), -webkit-linear-gradient(top, #F60, #FC0);
}

a.button.i-left2 {
  position: relative;
}

a.button.i-left2:before {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  top: 50%;
  left: 10px;
  margin: -12px 0 0 0;
  background-image: url(arrow.png);
  background-repeat: no-repeat;
  background-size: 24px 24px;
}



デモページ

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



background-position: left 10px center;


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

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

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

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

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



以上です。

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

例えばこんな。


デモページ