Category:Web

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

みなさん、こんにちは!

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

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

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

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

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

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

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

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

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

0

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

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

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

0

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

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

矢じり型のアイコン

0

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

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

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

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

0

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

シンプル・イズ・ベスト

吹き出しタイプの矢印

0

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

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

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

0

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

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

0

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

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

RECOMENDED

思わず見入ってしまう!おしゃれすぎるWebサイトまとめ【10選】

今回記事は、おしゃれなWEBサイトまとめです。私がおしゃれすぎて驚いた10個のWEBサイトをご紹…

”esa.io”を使ってみたのでレビューとおすすめの使い方

巷で噂の情報共有サービス”esa.io”の紹介をします。ずっと気になっていたサービスを実際に使っ…

Webデザイン・制作を勉強したい方にオススメの参考サイトまとめ

Webデザイン・制作の時に是非活用して頂きたい参考サイトの紹介です。日々のWeb制作作業で壁に…

【リッチなサイトへ】おしゃれなCSSアニメーションサンプル10選

リッチなサイトが多いこのご時世についていくためにCSSのみで書かれたアニメーションのサンプル…

CSSを非同期で読み込む方法【多分これが1番いいはず!】

全ブラウザ対応(IE9以下以外)のCSS非同期読み込みの方法を紹介します。ファーストビューで表示…

CSSのみでHTML要素を上下左右に中央寄せする方法

cssの配置には色んな方法がありますが、常にベストを保つのは難しいものです。今回の記事ではcs…

もっと読む