UX/UI
ノウハウ・TIPS
2013年4月30日
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: