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

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

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

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

  • 背景画像
  • 疑似要素
  • HTMLタグ

の3つがあります。

今回使うアロー画像については、「icooon-mono」から使わせてもらいました!
矢印アイコン 右4 | アイコン素材ダウンロードサイト「icooon-mono」

背景画像

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

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

ボタン

コピー<a class="btn-arrow" href="">ボタン</a>
コピー.btn-arrow {
	-webkit-appearance: none;
	background: transparent url(https://haniwaman.com/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で表現することもできます。これは背景画像としては表現できないメリットだと思います。

アロー

ボタン

コピー<a class="btn-arrow" href="">ボタン</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-arrow::-moz-foucus-inner {
	border: none;
	padding: 0;
}

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

.btn-arrow::after {
	-webkit-transform: translateY(-50%);
	background: transparent url(https://haniwaman.com/wp-content/uploads/2018/12/arrow.png) no-repeat top center/cover;
	content: "";
	height: 16px;
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
}

一応、疑似要素をJavaScriptから制御する方法はあるのですが、、ちょっと無理やり気味です。

疑似要素のCSSの値(content)をJavaScriptで制御する4パターン

HTMLタグ

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

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

ボタン

コピー<a class="btn-arrow" href="">ボタン<img src="https://haniwaman.com/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で上書きすることはできない

おわり

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

同じ表示でも色々な表現方法があるのがコーディングの面白いところだと個人的には思っています。単純作業の中にほんのちょっとだけ考えるポイントを残してくれているのがありがたいなって。

今回紹介した3パターンのメリット、デメリットを考えつつ、

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

の観点からどのパターンを使うか選んでみてください!

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事