ボタンTweetこんにちは、鴨田です。近頃はボタンのデザインに限らず、CSSで実現できるものは、グラフィックにせず、CSSだけで書いています。最近はあまりPhotoshopを開くこともなくなってきています。いうことで、本日はCSSだけで作るアイコン付きボタンの作り方です。アイコン付きというのがポイントです。アイコンなしボタンとりあえず、アイコンなしで作りましょう。#FC0);}デモページこんな感じでしょうかね。ボタンとしては十分に機能していると思います。その1単純に文字の横に、アイコンを置きたい場合はimgタグで表現したり、spanタグを使ってもいいと思います。0;}デモページimgとかspanで入れた際に、微妙にずれるので、ちょっと位置合わせする必要があります。この方法で作った場合の問題点として、アイコン+文字でのセンター揃えなので、アイコンの位置が変わってしまい、ボタンを縦に並べる様なデザインだと、統一感がなくなるということがあり得ます。次はアイコンの位置を固定したい場合を考えてみます。その2アイコンを左位置に固定したいと思います。24px;}デモページ前者(a.button.i-left1)は背景画像の一部として、アイコンを表現しています。この場合、一点、難があります。PCブラウザでは、特に問題なく見られると思いますが、スマートフォンの一部ブラウザで見ると、表示が崩れます。原因は下記CSS部分です。CSS3で拡張されたbackground-positionが解釈されないようです。画像にあらかじめマージンまで含める必要があります。それが面倒な場合などは、後者(a.button.i-left2)の実装をおすすめします。こちらであれば、モバイルブラウザでも崩れることはありません。アイコン自体を背景画像として表現するのではなく、ウェブフォントにしてしまうということも出来ます。昔の自分の記事ですが、参考までに。:beforeや:after議事要素を応用すると、いろいろな表現が可能です。例として、当ブログから以下の記事をご紹介します。CSSだけで簡単に吹き出しを作成する方法4つ!以上です。これから、フラットデザインが流行ってくると、ボタンの質感よりも、ボタンのアイコンに重点が置かれるようになると思いますので、そのようなときに役立てばいいかなと思います。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。