CSS Arrows From CodePen

In a website or application, arrows can determine how you navigate them by performing specific actions like “go to next page”, indicating to scroll “top or bottom, left or right” and many other. With the help of CSS pseudo-elements and borders, it’s easy to create different arrow styles that will look great on both mobile and desktop. So if you’re currently using arrow PNG images in your projects you can easily replace them with CSS arrows. Doing so, will reduce the number of requests when loading a website or web app.

When I have to add arrows with a specific style, one of my favourite places that I go to for inspiration is CodePen. So here’s a list of CSS arrows I put together to get you started.

Nice Responsive CSS Arrow

A responsive CSS arrow transition for switching directions.

See the Pen Nice Responsive CSS Arrow by nirsegev (@nirsegev) on CodePen.

Fancy Little CSS Arrows

Some fancy little arrows, using pseudo-elements and box-shadow

See the Pen Fancy Little CSS Arrows by poopsplat (@poopsplat) on CodePen.

CSS Arrow

A neat collection of various CSS arrows using different styles.

See the Pen CSS Arrow by andgatjens (@andgatjens) on CodePen.

Animated – ‘Back To Top’ Arrows

Two ‘Back To Top’ CSS arrows that look great animated.

See the Pen Animated – ‘Back To Top’ Arrows by EricPorter (@EricPorter) on CodePen.

Animated CSS Arrows

An animated hard left arrow done with only CSS animations.

See the Pen Animated CSS Arrows by RenMan (@RenMan) on CodePen.

Arrowed Link – Circle On Hover (cf Google Home Website)

A circle loading arrow on hover using SVG and CSS for transitions.

See the Pen Arrowed Link – Circle On Hover (cf Google Home Website) by AlexandreJolly (@AlexandreJolly) on CodePen.

Segment Arrows (CSS vs. SVG)

Comparing CSS solution to an SVG solution.

See the Pen Segment Arrows (CSS vs. SVG) by jasesmith (@jasesmith) on CodePen.

Pure CSS Arrows

Awesome collection of pure CSS arrows made in different styles.

See the Pen Pure CSS Arrows by saeedalipoor (@saeedalipoor) on CodePen.

CSS Skewed Arrow

Some normal and skewed CSS line arrows.

See the Pen CSS Skewed Arrow by nxworld (@nxworld) on CodePen.

Triple Arrow Animation

A tripple bottom arrow made with SVG and styled and animated with CSS.

See the Pen Triple Arrow Animation by malavigne (@malavigne) on CodePen.

SuprLiTE CSS Arrows

Some lite and re-usable a tags that make the left and right arrows with CSS. Built using a box-shadow with a cute hover transition on top.

See the Pen SuprLiTE CSS Arrows by billyysea (@billyysea) on CodePen.

CSS Arrow With Hover

A neat button arrow hover made with CSS.

See the Pen CSS Arrow With Hover by ChrisBup (@ChrisBup) on CodePen.

CSS Arrow Icon Animation

Cool CSS arrow transition on button click,

See the Pen CSS Arrow Icon Animation by bennettfeely (@bennettfeely) on CodePen.

Arrow Next & Previous Animation

Next & previous arrow animations using SVG and CSS.

See the Pen Arrow Next & Previous Animation by karimhossenbux (@karimhossenbux) on CodePen.

CSS Arrow Animation

Experimenting with using a single SVG, pseudo-elements (:before and :after) and CSS3 transitions/keyframes.

See the Pen CSS Arrow Animation by jmuspratt (@jmuspratt) on CodePen.

Pure CSS3 Curved Arrow Icons

A useful set of curved arrows using pure CSS3.

See the Pen Pure CSS3 Curved Arrow Icons by thoughtleader (@thoughtleader) on CodePen.

CSS Arrows With Rounded Corners

Some rounded arrows made with little CSS.

See the Pen CSS Arrows With Rounded Corners by Sfate (@Sfate) on CodePen.

Simple Pure CSS Arrow Button

Animated ‘Back To Top’ arrow made with CSS transitions.

See the Pen Simple Pure CSS Arrow Button by melissacabral (@melissacabral) on CodePen.

Gooey Scroll Arrow

Simple experiment on using an SVG gooey filter and CSS animations

See the Pen Gooey Scroll Arrow by flik185 (@flik185) on CodePen.

CSS Arrows

Animated refresh icon using a CSS arrow and transitions.

See the Pen CSS Arrows by KitReal (@KitReal) on CodePen.

Various CSS Arrow Styles

Experimenting with some nice CSS arrows, made with single divs and pseudo elements.

See the Pen Various CSS Arrow Styles by Sarah_C (@Sarah_C) on CodePen.

Animated CSS Arrow Down

Two bottom arrows with the smalller one above fading in to top.

See the Pen Animated CSS Arrow Down by JoshMac (@JoshMac) on CodePen.

Curved CSS Arrow

A curved arrow made with CSS3.

See the Pen Curved CSS Arrow by zomgbre (@zomgbre) on CodePen.

Elastic Arrow Buttons (React & GSAP)

Elastic left and right arrows made for React & GSAP with SVGs.

See the Pen Elastic Arrow Buttons (React & GSAP) by asistapl (@asistapl) on CodePen.

To Bottom Arrow

“A circle “”to bottom”” arrow animation on hover.”

See the Pen To Bottom Arrow by brysenackx (@brysenackx) on CodePen.

[WIP] Bouncing CSS Arrow Animation

Work in progress on this arrow bounce animation made with CSS.

See the Pen [WIP] Bouncing CSS Arrow Animation by colinkeany (@colinkeany) on CodePen.

Check it out
Don’t forget to like Arrow
Don’t forget to like Thumbs Up
If you like this post press the Thumbs Up