ボタンでアローアイコンをCSSで表現する3つの方法

2019年1月1日2021年11月28日

ボタンでアローアイコンをCSSで表現する3つの方法です。

ボタンでアローアイコンをCSSで表現する3つの方法

ボタンでアローアイコンを表現する3つの方法です。

背景画像
疑似要素
HTMLタグ

の3つがあります。

今回使うアロー画像については、「icooon-mono」から使わせてもらいました！

背景画像

背景画像としてアロー画像を設置する方法です。デメリットとしては、画像しか設置できないことです（当たり前ですが・・・）

背景画像にするメリットとしては、input type="submit"のボタンでも使えるという点ですね。フォームでは疑似要素などは使えません。

ボタン

<a class="btn-arrow" href="">ボタン</a>

.btn-arrow {
	-webkit-appearance: none;
	background: transparent url(https://haniwaman.com/cms/wp-content/uploads/2018/12/arrow.png) no-repeat center right 4px/16px 16px;
	border: 1px solid #4b4b4b;
	border-radius: 0;
	color: #4b4b4b;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	padding: 12px 36px;
	text-decoration: none;
}

.btn-arrow::-moz-foucus-inner {
	border: none;
	padding: 0;
}

.btn-arrow:hover,
.btn-arrow:focus {
	outline: none;
}

疑似要素

疑似要素でアローアイコンを設置する方法です。HTMLに画像を設置する必要がないので、HTMLコードはシンプルになります。疑似要素なので、JavaScriptで制御しずらいところが難点かもしれません。

また、画像でなくともシンプルなアローアイコンであればCSSで表現することもできます。これは背景画像としては表現できないメリットだと思います。

HTMLタグ

HTMLのボタン内に画像を入れちゃうパターンです。特徴としてはJavaScriptから操作しやすいという点ですかね。デメリットとしては、疑似要素と同じですが、フォーム系のボタンで使えない点かと思います。

また、こちらも画像でなくともspnaタグなどでCSSでシンプルなアローアイコンであれば作成することも可能です。

ボタン

<a class="btn-arrow" href="">ボタン<img src="https://haniwaman.com/cms/wp-content/uploads/2018/12/arrow.png" alt=""></a>

.btn-arrow {
	-webkit-appearance: none;
	background-color: #fff;
	background-image: none;
	border: 1px solid #4b4b4b;
	border-radius: 0;
	color: #4b4b4b;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	padding: 12px 36px;
	position: relative;
	text-decoration: none;
}

.btn-arrowc::-moz-foucus-inner {
	border: none;
	padding: 0;
}

.btn-arrowc:hover,
.btn-arrowc:focus {
	outline: none;
}

.btn-arrowc img {
	-webkit-transform: translateY(-50%);
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	margin: 0;
	box-shadow: none;
}

使い所はデザインによって異なる

3パターン紹介しましたが、メリットとデメリットをまとめます。

JavaScriptから操作したいかどうか
フォームで使うかどうか

の観点でどれを選ぶか決めるといいのかと思います。

	メリット	デメリット
背景画像	フォームボタンでも使える	画像でしか表現できない
疑似要素	画像でもCSSでも表現できる	JavaScriptから制御しずらい
HTMLタグ	class名とか付けられて、JavaScriptから操作しやすい	HTMLタグが肥大する。CSSで上書きすることはできない