2017/08/10　　 CSS　 , , , , ,

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

関連記事