CSSだけで矢印アイコン＆ボタンを作る方法！サンプル6選紹介

記事内で大事なメッセージを伝えたい時に「矢印」を加えるだけで、ユーザーの目に留まりやすくなります。

ごく簡単な矢印マークなら、キーボードで「やじるし」と入力・変換すれば「⇒」を表示できますが、ちょっと味気が無いですし、あんまり目立ちませんよね。

実はCSSで一工夫するだけで、より印象的＆お洒落な矢印アイコン・ボタンを記事内で使えるようになります。

今回は、HTML・CSSだけで矢印アイコン・ボタンを作るための方法を解説したいと思います。

記事の後半では、ユーザーの目を引く矢印アイコンや、思わずクリックしたくなる矢印ボタンのサンプルもご紹介します。

１．HTML・CSSで矢印を作る時の基本的な考え方

まずHTML・CSSで矢印を作るにはどうしたら良いのか？その基本的な考え方を整理しておきましょう。

手っ取り早く矢印アイコン＆ボタンを実装したい人は、この章を飛ばして２章以降をご覧ください。

１－１．矢印は疑似要素で描画する

矢印はテキストやリンクとセットで使われることが多いため、あらかじめ疑似要素で作っておくと便利です。

疑似要素とは、CSSから追加できる疑似的なコンテンツのこと。

HTMLで矢印用の要素（divやspan）をいちいち用意しなくても、好みのテキストやリンクにCSSクラスを指定するだけで、矢印を表示できるようになります。

例えば、上記のコードのように、適当な要素にclass="arrow_right"と入力するだけで済みます。

矢印は使う頻度の高いアイテムでもあるため、記事編集の段階では手軽＆効率よく矢印を配置できる環境を整えておくと良いと思います。

それでは、具体的に疑似要素で矢印を作る方法に入りましょう。

１－２．疑似要素の枠線で「くの字」を作る

CSSには「矢印を描画するためのプロパティ」的なものはありません。

なので、あの手この手を駆使して「矢印っぽいもの」を表示するだけなので、ご了承ください。

（とは言え、その点、疑似要素はクローラーに認識されないため、SEO上の減点にならないのも安心です。）

とりあえず、この章ではテキスト要素（pやspan）の先頭に矢印アイコンを配置することを前提に話を進めたいと思います。

まず初期設定として、任意のclassセレクタでpositionをrelativeに変更しておきましょう。

さらに、矢印アイコンのスペースを空けるためpadding-leftも指定してください。

次に、疑似要素をイジっていきます。

疑似要素は::beforeでも::afterでも、どちらでもOKです。

まず注意点として、contentは必ず空のまま指定してください。

たとえ中身が無くても""を指定しないと疑似要素は機能しません。

margin～left（3～7行目）までは「くの字」の位置を調整するためのプロパティです。

8行目以降が「くの字」の長さや太さ、向きを指定する箇所ですが、好みやレイアウトに合わせて調整してください。

ただし、widthとheightおよびborder-topとborder-rightの値は同じにしないと、矢印の形が崩れてしまいます。

ここまで見て察しが付いた方もいらっしゃるかと思いますが、「くの字」の正体は疑似要素の枠線（border）です。

疑似要素の天井と右側のみborderを引くことで「くの字」を作り、transform: rotate()で右方向へと回転させています。

棒が付いていないため、矢印としては不完全ではありますが、これだけでもアイコンとして十分使えそうです。

１－３．疑似要素の幅と高さで「棒」を作る

次に、先ほどの「くの字」に「棒」をくっつけて矢印を完成させましょう。

「くの字」を作った時はborderを使いましたが、今度は疑似要素の空間そのものを「棒」に見立てます。

こちらも::beforeまたは::afterどちらでも構いませんが、「くの字」作成で使用した疑似要素と重複しないようにしてください。

widthが棒の長さに相当し、太さはheightで調整します。

しかし、widhtの値が大きすぎると「くの字」を突き抜けてしまうことがあります。

この場合、棒のleftの数値を引くか、「くの字」のleftの数値上げるかすると、棒を長くしつつ突き抜けを回避することができます。

上記のコードでは、棒が長くなった分「くの字」のleft値を上げ、右へズラすよう指定しました。

また、矢印が右に広がると今度はテキストとの間隔が狭まってしまうため、同時にpadding-leftの調整も忘れないようにしましょう。

２．色々な方向に矢印アイコンを向けてみよう

前章では、右真横に向いた矢印アイコンを作りましたが、角度を変える場合も基本的な考え方は同じです。

２つの疑似要素で「くの字」「棒」をそれぞれ描画し、組み合わせるだけです。

ただし、角度によって位置調整のプロパティと値が異なります。

例えば、右真横の矢印では「くの字」「棒」ともにleftプロパティで左詰めの位置調整を行いましたが、左真横に向かせたい場合はrightプロパティを使ったほうが効率的です。

また「くの字」に適用しているtransform: rotate()も逆方向を向くよう角度を調整しましょう。

このように、各疑似要素の位置と角度の値を変えることで、様々な方向に矢印を向けることが可能です。

２－１．斜め右上を指す矢印アイコン

今度は下図のように、斜め右上を指す矢印を作ってみましょう。

まず、transformプロパティが「くの字」ではなく「棒」の疑似要素のほうに適用されていることに注意してください。

さらにtransform: rotate(135deg)で棒を斜め右上へと回転させています。

また、矢印の先にテキストが来るようにbottomとleftの値もそれぞれ調整する必要があります。

これは、矢印を配置する要素のサイズやレイアウトによって最適な位置が異なるため、自分なりに値を変更してみると良いでしょう。

２－２．斜め左上を指す矢印アイコン

斜め左上を指す場合には、「くの字」の枠線をborder-topとborder-leftに指定します。

真横や斜め右上を指すパターンとは、枠線のプロパティが異なるので気を付けてください。

指す方向によって棒の角度も変更しましょう。

２－３．斜め右下を指す矢印アイコン

斜め右下を指す場合の「くの字」の枠線はborder-rigntとborder-bottomです。

２－４．斜め左下を指す矢印アイコン

斜め左下を指す場合は、「くの字」の枠線にborder-bottomとborder-leftを指定してください。

各疑似要素のtopまたはrightの値を変えて、矢印が本体の要素を指すように調整しましょう。

３．CSSでお洒落な矢印アイコンを作ろう

ここまでオーソドックスな矢印アイコンを実装する方法を解説してきました。

今度は応用編として、ちょっとお洒落な装飾やアレンジを加えた矢印アイコンを作っていきたいと思います。

※コピペで実装できるようコードを用意していますが、デザインを自分なりに微調整したい場合は、前章をご覧になると参考になるかと思います。

３－１．丸い（白抜き）矢印アイコン

白抜きした「くの字」矢印の下に丸い背景を配置してみましょう。

この場合、まずbeforeで丸い背景を作り、afterで上から白抜きした矢印を乗っけます。

背景の丸みはborder-radiusで調整します。

正方形の要素に対して、border-radiusを50％に指定すると正円を作ることができます。

また、値をさらに小さくすれば角丸のアイコンになります。

四角い背景に矢印を白抜きしたい場合は、border-radiusプロパティ自体を取り除いちゃってください。

３－２．三角形の矢頭アイコン

矢印の矢頭の部分には「くの字」以外に「三角形」タイプのものもあります。

例えば、以下のような感じです。

シンプルではありますが、記事の見出しや箇条書きの文頭に付すだけでも、程よいアクセントになるかと思います。

CSSで三角形を作り出すには、以下のようにwidthとheightを0に指定し、３側面のborderプロパティを使って描画していきます。

border-bottom以外の２側面にtransparentが指定されていることに着目してください。

このコードを実行すると、上向きの三角形が表示されます。

詳しい説明は省きますが、大事なポイントは頂点の逆側のborderのみ表示させている点です。

つまり、矢印を下向きにしたい場合はborder-topを、左向きにしたい場合はborder-rightを表示させ、他のプロパティは透明（transparent）にしておきます。

また、頂点側のプロパティは不要です（例えば、上向きならborder-topを指定する必要はありません）。

これを疑似要素に応用すれば、テキストの文頭などに矢印を配置できます。

あるいは「３－１」でやった方法と組み合わせることで、白抜きの三角矢印アイコンが作れます。

疑似要素のスタイルを以下のように書き換えてみてください。

白抜きの場合は三角形のスタイルを::beforeではなく::afterで指定している点、気を付けましょう。

３－３．長方形と三角形の矢印アイコン

次は、前節で作った三角形に長方形の棒をくっつけて、太めの矢印アイコンを表現したいと思います。

これも長方形の疑似要素と三角形の疑似要素を組み合わせているわけですが、長方形は幅と高さを指定するだけなので、非常に簡単です。

::beforeで棒のスタイルを、::afterで矢頭のスタイルを指定しています。

また、以下のように方向を傾けて、マウスカーソルっぽく見せることも可能です。

ユーザーのクリックを誘導したいリンクなどに良いかもしれません。

CSSは以下の通り。

棒と矢頭ともにtransform: rotate()を使って角度を調整しています。

位置の値はレイアウトに合わせて変更してください。

４．CSSで矢印付きボタン（マウスオーバー型）を作ろう

矢印はユーザーの視線を誘導する役割があるため、ボタン（リンク）との相性はとても良いと思います。

CSSだけでもマウスオーバー（ホバー）時にスタイルが変化したり、簡易的なアニメーションを加えることが可能です。

この章では、ユーザーが思わずクリックしたくなるような矢印つきボタンのサンプルとCSSコードをご紹介します。

基本的にコピペだけで実装できるようにしていますが、この記事の「１」および「２」を読んでもらえると理解が深まり、かつ自分なりにアレンジできるようになるかと思います。

４－１．マウスオーバー型のシンプルな矢印ボタン

アンカーテキストの文頭に円形の矢印アイコンを配置したボタンです。

マウスオーバーによって、背景色が鮮やかになり、右下に影を落とします。

（※フォントはGoolgle Fontsを利用しています。）

８行目のtransitionプロパティでは、マウスオーバー時のスタイルの変化速度を調整できます。

プロパティごとに秒数を指定でき、デフォルトでは背景色（background-color）を1秒（1s）、影（box-shadow）を1.5秒（1.5s）かけて変化するよう指定してます。

ちなみに、矢印の配置を文頭ではなく文末にしたい場合は、３つのスタイルを変更するだけです。

• .arrow_button { padding: 10px 20px 10px 47px; }　⇒　.arrow_button { padding: 10px 47px 10px 20px }
• .arrow_button::before { left: 18px; }　⇒　.arrow_button::before { right: 21px }
• .arrow_button::after { left: 13px }　⇒　.arrow_button::after { right: 13px }

以下のようなレイアウトに表示されれば成功です。

（※上図はマウスオーバー時のキャプチャー画像です。）

４－２．マウスオーバー時に矢印が現れるボタン

触れるとテキストの文頭に矢印が現れるボタンを作ってみましょう。

まず、デフォルト（マウスオーバー前）のスタイルでは、矢印をvisibilityプロパティで非表示（hidden）にしておきます。

マウスオーバー時のスタイルは:hoverで操作しますが、疑似要素に対しても問題なく機能します。

25行目の.arrow_button:hover::beforeは、本体の要素（.arrow_button）に触れた時に疑似要素のスタイルを変更する、という意味です。

visibilityの値をvisibleにすることで、マウスオーバー時のみ矢印が表示されます。

また、「３－２」で解説した方法を応用すれば、マウスオーバー時に三角形の矢印を表示することも可能です。

変更しているのは矢印のスタイルのみで、イベント処理に関しては「くの字」タイプと同様にvisibilityの値を操作しています。

４－３．矢印がスライドするアニメーションボタン

もう少し趣向を凝らして、矢印ボタンにアニメーションを加えてみましょう。

文頭の矢印が点滅しながらスライドします。

このようなアニメーションを実装するのもCSSなら簡単です。

以下のCSSように、疑似要素にanimationプロパティを指定し、さらに@keyframsにアニメーションの内容を書き込んでください。

26行目より前のコードは、今までの矢印ボタンの作り方と同じです（微調整していますが）。

26行目のanimationプロパティで疑似要素をどのように動かすのか初期設定を入力します。

簡単に説明すると、左から順番に「アニメーションの名前（silideBlink）」「アニメーション全体の時間（1s）」「展開方法（linear = 一定に変化）」「アニメーションの回数（infinite = 永遠に繰り返す）」です。

「アニメーションの名前」は何でも構いませんが、29行目にある「@keyframes 〇〇」の名前と同じものを指定してください。

@keyframesには、具体的なアニメーションの内容を指示します。

from{}はアニメーション開始時のスタイルで、to{}が終了時のスタイルです。

開始時に矢印を透明（opacity:0）にし、終了に向かって徐々に矢印が浮かび上がってくる（opacity:1）ように指定しています。

さらにleftプロパティを8px⇒25pxへ増加させることで、左から右へと移動（スライド）する仕様になっています。

@keyframesにはプロパティを複数追加できますので、アレンジを加えたい場合は自由に調整してみると良いでしょう。

また、矢印を両サイドに配置したい場合は、以下のように::afterを追加してください。

また、ボタン右側に矢印を置くためのスペースを空けるのを忘れずに。

下図のように、ボタンの左右に矢印アニメーションが配置されれば成功です。

このように視覚的な動きが加わることで「注目されやすさ」「クリックされやすさ」の向上も期待できます。

まとめ

今回は、CSSで矢印を描画する方法、またアイコンやボタンとして実用的に活用するテクニックをご紹介しました。

人間は矢印の先を「見たい」「知りたい」と無意識に思うものなので、ユーザーの視線誘導には最適なアイテムかと思います。

コピペでもOKですが、やはり自分なりにアレンジを加えたり、自在にレイアウト調整できるようになると便利です。