Category:Web

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

みなさん、こんにちは!

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

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

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

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

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

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

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

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

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

0

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

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

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

0

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

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

矢じり型のアイコン

0

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

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

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

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

0

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

シンプル・イズ・ベスト

吹き出しタイプの矢印

0

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

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

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

0

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

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

0

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

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

RECOMENDED

【2018年最新】超高機能でおすすめな無料プロトタイピングツールまとめ

プロトタイピングツールとは、Web制作やアプリケーション制作時における完成形をイメージしやす…

ガチのPython初心者がDjangoを使ってWebアプリを作ってみる【導入編】

ガチのPython初心者がいきなりDjangoを使ってWebアプリケーションを作成するという無謀なチャレ…

Webライティングが捗り過ぎる!オススメの文章校正ツール「文賢」

ライティングは捗っていますか?今回紹介しますのは最強のオススメ文章校正ツールです。最近正…

【クリック率倍増!】CTAのボタンの見直すべきポイント

CTAの最適化は出来ていますか?今回紹介するのはCTAのボタンで見直すべきポイントです。3つのポ…

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

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

【厳選】最新のWebアプリ・サービス情報を発見できるサイトまとめ

情報収集が趣味でよくWebアプリやWebサービスのリリース情報を追っかけています。今回はそのWeb…

もっと読む