This post contains a total of 5+ CSS Navigation Arrow Examples with Source Code. All these Navigation Arrows are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Navigation Arrow Examples
1. Arrow SVG
Made by Marco Barría. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html,
body {
height: 100%;
overflow: hidden;
}
body {
background: rgb(17,123,189);
}
button {
-webkit-appearance: none;
background: transparent;
border: 0;
outline:0;
}
svg {
padding: 5px;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -45px;
margin-left: -35px;
width: 70px;
height: 90px;
}
.left {
left: 42%;
}
.right {
left: 58%;
}
.left:hover polyline,
.left:focus polyline {
stroke-width: 3;
}
.left:active polyline {
stroke-width: 6;
transition: all 100ms ease-in-out;
}
.right:hover polyline,
.right:focus polyline {
stroke-width: 3;
}
.right:active polyline {
stroke-width: 6;
transition: all 100ms ease-in-out;
}
polyline {
transition: all 250ms ease-in-out;
}
</style>
</head>
<body>
<button class="arrow left">
<svg width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
<polyline fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="
45.63,75.8 0.375,38.087 45.63,0.375 "/>
</svg>
</button>
<button class="arrow right">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
<polyline fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="
0.375,0.375 45.63,38.087 0.375,75.8 "/>
</svg>
</button>
</body>
</html>2. CSS Chevron Arrows
Made by Vary. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
html {
background: black;
}
body {
position: absolute;
top: 50%;
left: 50%;
width: 10vmin;
height: 5vmin;
transform: translate(-50%, -50%);
}
.arrow {
position: absolute;
top: 50%;
width: 3vmin;
height: 3vmin;
background: transparent;
border-top: 1vmin solid white;
border-right: 1vmin solid white;
box-shadow: 0 0 0 lightgray;
transition: all 200ms ease;
}
.arrow.left {
left: 0;
transform: translate3d(0, -50%, 0) rotate(-135deg);
}
.arrow.right {
right: 0;
transform: translate3d(0, -50%, 0) rotate(45deg);
}
.arrow:hover {
border-color: orange;
box-shadow: 0.5vmin -0.5vmin 0 white;
}
.arrow:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -60%) rotate(45deg);
width: 200%;
height: 200%;
}
</style>
</head>
<body>
<a href="#" class="arrow left"></a>
<a href="#" class="arrow right"></a>
</body>
</html>3. Arrows
Made by Christian Brassat. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
/** Layout */
@import url("https://fonts.googleapis.com/css?family=Righteous");
body {
background: #001432;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Righteous;
height: 100vh;
margin: 0;
}
hr {
width: 33%;
border-color: rgba(255, 255, 255, 0.2);
border-width: 2px 0;
border-style: solid;
margin: 3em 0;
}
.arrow-wrapper {
display: flex;
align-items: center;
}
.block {
width: 300px;
height: 100px;
background: #eee;
margin: 15px;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
color: #001432;
opacity: 0.4;
text-align: center;
text-transform: uppercase;
transition: opacity 0.3s;
}
.arrow-wrapper:hover h1 {
opacity: 1;
}
/***************
* Arrow 1
***************/
#arrow_1 .arrow {
cursor: pointer;
display: block;
width: 21.216407355px;
height: 42.43281471px;
position: relative;
}
#arrow_1 .arrow span, #arrow_1 .arrow:before, #arrow_1 .arrow:after {
background: #fff;
content: "";
display: block;
width: 30px;
height: 2px;
position: absolute;
top: calc(50% - (2px / 2));
}
#arrow_1 .arrow:before {
transform: rotate(-45deg);
}
#arrow_1 .arrow:after {
transform: rotate(45deg);
}
#arrow_1 .arrow span {
width: 0;
}
#arrow_1 .arrow:hover span {
width: 42.42px;
}
#arrow_1 .arrow.arrow--left span, #arrow_1 .arrow.arrow--left:before, #arrow_1 .arrow.arrow--left:after {
left: 0;
transform-origin: left 50%;
}
#arrow_1 .arrow.arrow--left:before, #arrow_1 .arrow.arrow--left:after {
transition: left 0.3s 0.05s;
}
#arrow_1 .arrow.arrow--left span {
transition: width 0.3s, left 0.3s 0.05s;
}
#arrow_1 .arrow.arrow--left:hover span, #arrow_1 .arrow.arrow--left:hover:before, #arrow_1 .arrow.arrow--left:hover:after {
left: -21.216407355px;
}
#arrow_1 .arrow.arrow--right span, #arrow_1 .arrow.arrow--right:before, #arrow_1 .arrow.arrow--right:after {
right: 0;
transform-origin: right 50%;
}
#arrow_1 .arrow.arrow--right:before, #arrow_1 .arrow.arrow--right:after {
transition: right 0.3s 0.05s;
}
#arrow_1 .arrow.arrow--right span {
transition: width 0.3s, right 0.3s 0.05s;
}
#arrow_1 .arrow.arrow--right:hover span, #arrow_1 .arrow.arrow--right:hover:before, #arrow_1 .arrow.arrow--right:hover:after {
right: -21.216407355px;
}
/***************
* Arrow 2
***************/
#arrow_2 .arrow {
color: #fff;
cursor: pointer;
display: block;
align-items: flex-start;
text-transform: uppercase;
position: relative;
transition: transform 0.3s;
}
#arrow_2 .arrow span {
display: block;
width: 3em;
opacity: 0;
transition: opacity 0.3s 0s;
padding: 0 0.5em;
}
#arrow_2 .arrow:hover span {
opacity: 1;
transition: opacity 0.3s 0.1s;
}
#arrow_2 .arrow:before {
content: "";
display: block;
border: solid #fff;
border-width: 2px 2px 0 0;
position: absolute;
top: 4px;
width: 10px;
height: 10px;
}
#arrow_2 .arrow.arrow--left:before {
transform: rotate(-135deg);
right: 0;
transition: right 0.3s 0.2s;
}
#arrow_2 .arrow.arrow--left:hover:before {
right: 100%;
transition: right 0.3s;
}
#arrow_2 .arrow.arrow--right {
text-align: right;
}
#arrow_2 .arrow.arrow--right:before {
left: 0;
transform: rotate(45deg);
transition: left 0.3s 0.2s;
}
#arrow_2 .arrow.arrow--right:hover:before {
left: 100%;
transition: left 0.3s;
}
#arrow_2 .arrow:hover {
transform: none;
}
</style>
</head>
<body>
<div id="arrow_1" class="arrow-wrapper">
<div class="arrow arrow--left">
<span></span>
</div>
<div class="block"><h1>Arrow 1</h1></div>
<div class="arrow arrow--right">
<span></span>
</div>
</div>
<hr>
<div id="arrow_2" class="arrow-wrapper">
<div class="arrow arrow--left">
<span>Prev</span>
</div>
<div class="block"><h1>Arrow 2</h1></div>
<div class="arrow arrow--right">
<span>Next</span>
</div>
</div>
</body>
</html>4. Navigation arrow animation
Made by Martin LEROUX. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body { background: #333; }
div { width: 150px; text-align: center; margin: 150px auto; }
p{
width: 0;
height: 0;
border-style: solid;
border-width: 30px 20px 0 20px;
border-color: #ffffff transparent transparent transparent;
animation-delay: 5s;
animation: nomAnim infinite linear 2.5s;
}
@keyframes nomAnim{
from { transform:translateY(0) }
50% { transform:translateY(0) }
60% { transform:translateY(10px); animation-timing-function: ease-out;}
70% { transform:translateY(20px) }
80% { transform:translateY(10px); animation-timing-function: ease-out;}
90% { transform:translateY(20px) }
to { transform:translateY(0) }
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>5. Flexing pagination arrows
Made by Hakim El Hattab. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
background: #33ab83;
}
button {
-webkit-appearance: none;
background: transparent;
border: 0;
outline: 0;
}
.paginate {
position: relative;
margin: 10px;
width: 50px;
height: 50px;
cursor: pointer;
transform: translate3d(0, 0, 0);
position: absolute;
top: 50%;
margin-top: -20px;
-webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.2));
}
.paginate i {
position: absolute;
top: 40%;
left: 0;
width: 50px;
height: 5px;
border-radius: 2.5px;
background: #fff;
transition: all 0.15s ease;
}
.paginate.left {
right: 58%;
}
.paginate.left i {
transform-origin: 0% 50%;
}
.paginate.left i:first-child {
transform: translate(0, -1px) rotate(40deg);
}
.paginate.left i:last-child {
transform: translate(0, 1px) rotate(-40deg);
}
.paginate.left:hover i:first-child {
transform: translate(0, -1px) rotate(30deg);
}
.paginate.left:hover i:last-child {
transform: translate(0, 1px) rotate(-30deg);
}
.paginate.left:active i:first-child {
transform: translate(1px, -1px) rotate(25deg);
}
.paginate.left:active i:last-child {
transform: translate(1px, 1px) rotate(-25deg);
}
.paginate.left[data-state=disabled] i:first-child {
transform: translate(-5px, 0) rotate(0deg);
}
.paginate.left[data-state=disabled] i:last-child {
transform: translate(-5px, 0) rotate(0deg);
}
.paginate.left[data-state=disabled]:hover i:first-child {
transform: translate(-5px, 0) rotate(0deg);
}
.paginate.left[data-state=disabled]:hover i:last-child {
transform: translate(-5px, 0) rotate(0deg);
}
.paginate.right {
left: 58%;
}
.paginate.right i {
transform-origin: 100% 50%;
}
.paginate.right i:first-child {
transform: translate(0, 1px) rotate(40deg);
}
.paginate.right i:last-child {
transform: translate(0, -1px) rotate(-40deg);
}
.paginate.right:hover i:first-child {
transform: translate(0, 1px) rotate(30deg);
}
.paginate.right:hover i:last-child {
transform: translate(0, -1px) rotate(-30deg);
}
.paginate.right:active i:first-child {
transform: translate(1px, 1px) rotate(25deg);
}
.paginate.right:active i:last-child {
transform: translate(1px, -1px) rotate(-25deg);
}
.paginate.right[data-state=disabled] i:first-child {
transform: translate(5px, 0) rotate(0deg);
}
.paginate.right[data-state=disabled] i:last-child {
transform: translate(5px, 0) rotate(0deg);
}
.paginate.right[data-state=disabled]:hover i:first-child {
transform: translate(5px, 0) rotate(0deg);
}
.paginate.right[data-state=disabled]:hover i:last-child {
transform: translate(5px, 0) rotate(0deg);
}
.paginate[data-state=disabled] {
opacity: 0.3;
cursor: default;
}
.counter {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
margin-top: -15px;
font-size: 30px;
font-family: Helvetica, sans-serif;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
color: #fff;
}
</style>
</head>
<body>
<div class="counter"></div>
<button class="paginate left"><i></i><i></i></button>
<button class="paginate right"><i></i><i></i></button>
<script>
// basic paging logic to demo the buttons
var pr = document.querySelector('.paginate.left');
var pl = document.querySelector('.paginate.right');
pr.onclick = slide.bind(this, -1);
pl.onclick = slide.bind(this, 1);
var index = 0,total = 5;
function slide(offset) {
index = Math.min(Math.max(index + offset, 0), total - 1);
document.querySelector('.counter').innerHTML = index + 1 + ' / ' + total;
pr.setAttribute('data-state', index === 0 ? 'disabled' : '');
pl.setAttribute('data-state', index === total - 1 ? 'disabled' : '');
}
slide(0);
</script>
</body>
</html>6. SVG Arrow next previous animation
Made by Karim. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div svg {
width: 100px;
height: auto;
margin: 0 2rem;
cursor: pointer;
overflow: visible;
}
div svg polygon, div svg path {
transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}
div svg:hover polygon, div svg:hover path {
transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
fill: #FF4136;
}
div svg:hover .arrow {
animation: arrow-anim 2.5s cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
div svg:hover .arrow-fixed {
animation: arrow-fixed-anim 2.5s cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
@keyframes arrow-anim {
0% {
opacity: 1;
transform: translateX(0);
}
5% {
transform: translateX(-0.1rem);
}
100% {
transform: translateX(1rem);
opacity: 0;
}
}
@keyframes arrow-fixed-anim {
5% {
opacity: 0;
}
20% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="wrapper">
<svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="prev" transform="translate(8.500000, 8.500000) scale(-1, 1) translate(-8.500000, -8.500000)">
<polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
<polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
<path d="M-1.48029737e-15,0.56157424 L-1.48029737e-15,16.1929159 L9.708,8.33860465 L-2.66453526e-15,0.56157424 L-1.48029737e-15,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
</g>
</svg>
<svg width="18px" height="17px" viewBox="-1 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
<polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
<path d="M-4.58892184e-16,0.56157424 L-4.58892184e-16,16.1929159 L9.708,8.33860465 L-1.64313008e-15,0.56157424 L-4.58892184e-16,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
</g>
</svg>
</div>
</body>
</html>