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 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);
}
こんな感じでしょうかね。
ボタンとしては十分に機能していると思います。
● アイコン付きボタン その１
単純に文字の横に、アイコンを置きたい場合は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で入れた際に、微妙にずれるので、ちょっと位置合わせする必要があります。
また、この方法で作った場合の問題点として、
アイコン＋文字でのセンター揃えなので、アイコンの位置が変わって しまい、
ボタンを縦に並べる様なデザインだと、統一感がなくなるということがあり得ます。
なので、次はアイコンの位置を固定したい場合を考えてみます。
● アイコン付きボタン その２
アイコンを左位置に固定したいと思います。
<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つ！
以上です。
これから、フラットデザインが流行ってくると、
ボタンの質感よりも、ボタンのアイコンに重点が置かれるようになると思いますので、
そのようなときに役立てばいいかなと思います。
例えばこんな。
