CSSで作ったボタンに画像アイコンを付ける
2017.08.10 2019.11.30
CSSだけで作るボタンに画像アイコンを付ける方法です。スマホサイズにも対応してます。
前にアイコンがあるパターン
使い方
html
呼び出しURLにclass名を指定します。(今回はbtn-green)
<a href="#" class="btn-green">緑のボタン</a>
css
“画像URL”にお好みのアイコン素材のURLを入れてください。
background
の色を変更すればボタンの色を変えられます。(この辺りbackground: #00913D;background: #6FB83F;)
a.btn-green{ padding: 0.5em; margin: 10px 0; display: block; color: #fff !important; background: #00913D; text-decoration: none; font-weight: bold; font-size:16px; border-radius: 3px; text-align:center; text-decoration:none !important; } a.btn-green:before { content: ""; display: inline-block; width: 18px; height: 18px; margin: -3px 5px 0 0; background: url("画像URL") no-repeat; background-size: contain; vertical-align: middle; } a.btn-green:hover { background: #6FB83F; } @media screen and (min-width: 768px){ a.btn-green{ padding: 0.5em 2em; margin: 10px auto; font-size:20px; display:inline-block; } a.btn-green:before { margin: -3px 10px 0 0; } }
後ろにアイコンがあるパターン
html
<a href="#" class="btn-orange">オレンジのボタン</a>
css
前にアイコンがあるパターンとの違いは、:after
を利用しています。
a.btn-orange{ padding: 0.5em; margin: 10px 0; display: block; color: #fff !important; background: #FF8300; text-decoration: none; font-weight: bold; font-size:16px; border-radius: 3px; text-align:center; text-decoration:none !important; } a.btn-orange:after { content: ""; display: inline-block; width: 18px; height: 18px; margin: -3px 0 0 5px; background: url("画像URL") no-repeat; background-size: contain; vertical-align: middle; } a.btn-orange:hover { background: #FFCE71; } @media screen and (min-width: 768px){ a.btn-orange{ padding: 0.5em 2em; margin: 10px auto; font-size:20px; display:inline-block; } a.btn-orange:before { margin: -3px 0 0 10px; } }
こんな感じでCSSでテキストボタンが作れるかと思います。後はお好みでアレンジしてみてください。