これが欲しかった！HTML/CSSのみで作られた矢印アイコンのスニペット

みなさん、こんにちは！

よくWebサイトで使用される矢印アイコンですがFont Awesomeで済ましてしまうことって多いじゃないですか。

でもサイトのテイスト的にもっと細いほうが良いとかがあったりして、結局自作する際に少々面倒……。

そんなときに活躍してくれそうなHTML5、CSS3のみで作成された矢印アイコンを今回はご紹介していこうと思います！

アニメーションも紹介していますのでこちらも同時に活用してみてくださいね。

HTML／CSSのみで作られた矢印アイコンまとめ

すべてCodePenからの引用になります。

よかったらご自身でも他のモノを探してみてはいかがでしょうか。

では早速紹介していきます！

スクロールを促す矢印アイコン

0

ファーストビューがウインドウサイズいっぱいの時によく用いられるアイコン。

バウンスのアニメーション付きです！

最もポピュラーな矢印アイコン

0

ページ送り（ページネーション）などでよく使われる矢印アイコン。マウスホバーで色変換ありです。

細めなものをお探しの方むけです。

矢じり型のアイコン

0

立体的で矢じりの形をしたボタンです。

パンくずリストなどでもこの形はしばしば見受けられます。

アクションを促せそうな形ですね。

色んな形と向きのベーシックな矢印アイコン

0

とりあえずベーシックな矢印アイコンが欲しい人向け。

シンプル・イズ・ベスト

吹き出しタイプの矢印

0

tooltipや会話風のデザインに使われる吹き出しタイプ。

これが意外と実装がめんどくさいので、残しておきたい一個。

先が細くなるタイプの矢印アイコン

0

あまり見かけないですが、いつか使うかもしれないという思いで紹介。

中に食い込んだ矢印アイコン

0

ボックス内に食い込むタイプのやつ。

ちょっとしたことでおしゃれに見えるのでおすすめ。