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 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.
Fancy Little CSS Arrows
Some fancy little arrows, using pseudo-elements and box-shadow
CSS Arrow
A neat collection of various CSS arrows using different styles.
Animated – ‘Back To Top’ Arrows
Two ‘Back To Top’ CSS arrows that look great animated.
Animated CSS Arrows
An animated hard left arrow done with only CSS animations.
Arrowed Link – Circle On Hover (cf Google Home Website)
A circle loading arrow on hover using SVG and CSS for transitions.
Segment Arrows (CSS vs. SVG)
Comparing CSS solution to an SVG solution.
Pure CSS Arrows
Awesome collection of pure CSS arrows made in different styles.
CSS Skewed Arrow
Some normal and skewed CSS line arrows.
Triple Arrow Animation
A tripple bottom arrow made with SVG and styled and animated with CSS.
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.
CSS Arrow With Hover
A neat button arrow hover made with CSS.
CSS Arrow Icon Animation
Cool CSS arrow transition on button click,
Arrow Next & Previous Animation
Next & previous arrow animations using SVG and CSS.
CSS Arrow Animation
Experimenting with using a single SVG, pseudo-elements (:before and :after) and CSS3 transitions/keyframes.
Pure CSS3 Curved Arrow Icons
A useful set of curved arrows using pure CSS3.
CSS Arrows With Rounded Corners
Some rounded arrows made with little CSS.
Simple Pure CSS Arrow Button
Animated ‘Back To Top’ arrow made with CSS transitions.
Gooey Scroll Arrow
Simple experiment on using an SVG gooey filter and CSS animations
CSS Arrows
Animated refresh icon using a CSS arrow and transitions.
Various CSS Arrow Styles
Experimenting with some nice CSS arrows, made with single divs and pseudo elements.
Animated CSS Arrow Down
Two bottom arrows with the smalller one above fading in to top.
Curved CSS Arrow
A curved arrow made with CSS3.
Elastic Arrow Buttons (React & GSAP)
Elastic left and right arrows made for React & GSAP with SVGs.
To Bottom Arrow
“A circle “”to bottom”” arrow animation on hover.”
[WIP] Bouncing CSS Arrow Animation
Work in progress on this arrow bounce animation made with CSS.
