Very Simple CSS-Only Arrows (Plus Animation)

Welcome to a tutorial on how to create simple arrows and animate them using pure CSS only. Want to add an arrow icon to a block of text? Create an “arrow button”? Or add an arrow to a menu item?

The easiest way to attach an arrow is to use HTML symbols and CSS content.

  • .arrow::before { content: "\2192" }
  • <div class="arrow">Right Arrow</div>
  • <p>Right Arrow <i class="arrow"></i></p>

That covers the quick basics, but read on if you need more examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

 

TABLE OF CONTENTS

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

CSS ARROWS

All right, let us now get into the examples of creating arrows with pure CSS only.

 

1) BASIC ARROWS

THE HTML

1-basic-arrows.html
<p class="arrow up">Up arrow</p>
<p class="arrow down">Down arrow</p>
<p class="arrow left">Left arrow</p>
<p class="arrow right">Right arrow</p>

 

THE CSS

1-basic-arrows.css
/* (A) ARROW "BASE" */
.arrow::before {
  display: inline-block;
  width: 30px;
  text-align: center;
  font-size: 16px;
}
 
/* (B) ARROW DIRECTION */
.up::before { content: "\2191" }
.down::before { content: "\2193" }
.left::before { content: "\2190" }
.right::before { content: "\2192" }

 

THE RESULT

Up arrow

Down arrow

Left arrow

Right arrow

  • The ::before pseudo-class is probably confusing for beginners. Fear not, it is very simply <p>[::BEFORE IS HERE] CONTENT [::AFTER IS HERE]</p>.
  • \2191 is the hex code for the “up arrow” HTML symbol. Check out this link for more arrow symbols.
  • .up::before { content: "\2191" } – For all class="up" elements, attach an HTML up arrow symbol before the actual content.

Finally, here are a few beginner questions that I can foresee people asking.

  • To create an arrow button, just use the HTML code directly. No CSS is required. <button>&#8593;</button>
  • Arrow only without text – <i class="arrow up"></i>
  • Bigger arrows – Just change the font-size accordingly. The arrow is literally text, color and font-weight will work too.
  • Place the arrow on the right side.
    • Use  ::after instead of ::before
    • Or <p>Arrow <i class="arrow up"></i></p>

 

 

2) ARROW ANIMATION (ON HOVER)

THE HTML

2-arrow-hover.html
<p class="arrow right rotate">Hover to rotate</p>
<p class="arrow right offset">Hover to offset</p>

 

THE CSS

2-arrow-hover.css
/* (A) ROTATE ON HOVER */
.arrow.rotate:hover::before {
  color: red;
  transform: rotate(90deg);
  transition: all 0.3s;
}
 
/* (B) OFFSET ON HOVER */
.arrow.offset:hover::before {
  color: red;
  transform: translateX(5px);
  transition: all 0.3s;
}

 

THE RESULT

Hover to rotate

Hover to offset

Some of you smart code ninjas may be thinking – “Hey, we can just do a <p>ARROW SYMBOL CODE</p>. Why all the dumb CSS sh1t?”. Well, here’s the answer, to do CSS animation.

 

 

3) ARROW ANIMATION (AUTOMATIC)

THE HTML

3-arrow-animate.html
<p class="arrow right offsetr">Animated Arrow</p>

 

THE CSS

3-arrow-animate.html
@keyframes offsetr {
  from { transform: translateX(-5px); }
  to { transform: translateX(5px); }
}
 
.offsetr::before {
  animation-name: offsetr;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

 

THE RESULT

Animated Arrow

Need the arrow to be “permanently animated”?

  • Define your own set of @keyframes first, this is how you want to animate the arrow. In this simple example, we will just move the arrow left and right.
  • Attach the keyframes to the arrow – animation-name: offsetr.
  • Lastly, make the animation run infinitely – animation-iteration-count: infinite.

 

 

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

COMPATIBILITY CHECKS

CSS animation is nothing new now, it is generally well-supported in all modern browsers.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

CSS-Only Arrow (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.