Fancy Navigation Arrows Design

Fancy Navigation Arrows Design

Check out our CSS Course, made especially for Elementor users.

Table of Contents

In this project, we will be creating these fancy navigation arrows, with CSS only!

We will be practicing CSS pseudo-elements, flexbox, gradients, transform and box shadow. We will also practice :nth-child selectors.

We will also be using CSS clip path and filter, which aren't covered in the course yet. I suggest you follow the suggestions outlined in the Automatic CSS learning path chapter for when you encounter CSS properties you don't yet know about!


  • Uses the default Elementor Icon List Element
  • Hover styling using the CSS filter property
  • Pseudo-element for the bottom shadow

Video playlist

Get the full CSS course now to unlock this chapter, and 50+ others. also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly


Leave a Reply