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でテキストボタンが作れるかと思います。後はお好みでアレンジしてみてください。