Animated Directional Arrows In CSS – Arrows.css

Author: Hyperseeker
Views Total: 701 views
Official Page: Go to website
Last Update: November 9, 2020
License: MIT


Animated Directional Arrows In CSS – Arrows.css


The arrows.css CSS library allows you to display animated, interactive, directional arrows before or after elements you specify.

Based on Unicode, no SVG and Image required.

How to use it:

1. Load the minified version of the arrows.css on the HTML page.

<link rel="stylesheet" href="arrows.min.css" />

2. Add the required CSS class arrow to your element and determine the position & direction of the arrow.

<h1 class="arrow before up">Arrows.css Example</h1>
<h1 class="arrow after up">Arrows.css Example</h1>
<h1 class="arrow before down">Arrows.css Example</h1>
<h1 class="arrow before left">Arrows.css Example</h1>
<h1 class="arrow before right">Arrows.css Example</h1>

See also  Custom Checbox & Radio Inputs with Pure CSS and Font Awesome

Leave a Reply

Your email address will not be published. Required fields are marked *