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?

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

[web_stories_embed url=”https://code-boxx.com/web-stories/css-arrow/” title=”Simple CSS-Only Arrow” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

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.

 

 

 

1) BASIC ARROWS

1A) THE 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>

 

1B) THE 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" }

 

1C) THE RESULT

• 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)

2A) THE HTML

<p class="arrow right rotate">Hover to rotate</p>
<p class="arrow right offset">Hover to offset</p>

 

2B) THE 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;
}

 

2C) THE RESULT

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)

3A) THE HTML

<p class="arrow right offsetr">Animated Arrow</p>

 

3B) THE CSS

@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;
}

 

3C) THE RESULT

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.

 

 

 

COMPATIBILITY CHECKS

• CSS Animation – CanIUse
• CSS Keyframes – CanIUse
• CSS 2D Transform – CanIUse

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

 

LINKS & REFERENCES

• Using CSS animations – MDN
• Before Pseudo-class – MDN
• HTML Arrow Symbols – Toptal

 

INFOGRAPHIC CHEAT SHEET