こんにちは、鴨田です。 近頃はボタンのデザインに限らず、CSSで実現できるものは、 グラフィックにせず、CSSだけで書いています。 ボタンデザインに限らず、HTML/CSSで書いた方が効率的なこもあって、 最近はあまりPhotoshopを開くこともなくなってきています。 ということで、本日はCSSだけで作るアイコン付きボタンの作り方です。 アイコン付きというのがポイントです。 ● アイコンなしボタン とりあえず、アイコンなしで作りましょう。 HTML body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; margin: 0; padding: 0; } a { /* サイズ指定 */ width
![CSSだけで作るアイコン付きボタンの作り方](https://cdn-ak-scissors.b.st-hatena.com/image/square/39e482c008d605a5b5f9180e98756d084baf2b67/height=288;version=1;width=512/https%3A%2F%2Fblog.asial.co.jp%2Fogp-logo.jpg)