This post contains a total of 15+ CSS Arrow Examples with Source Code. All these Arrows are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Arrow Examples
1. Dashed Animated Arrow
Made by CP Designer. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
.path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 3s linear forwards; animation-iteration-count: 1;animation-delay: 1s;}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.dashed{
stroke-dasharray: 5,12;
}
#arrow{animation: arrow 2s linear forwards; opacity:0;}
@keyframes arrow {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="graph__wrapper">
<svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path id="Path-1" class="path" fill="none" stroke="#db5862" stroke-width="5" stroke-linejoin="round" stroke-miterlimit="10" d="M1.4,2.1c0,0,86,57,211.5,41.5s172.5-24.5,289,81"/>
<path class="dashed" fill="none" stroke="white" stroke-width="8" stroke-linejoin="round" stroke-miterlimit="10" d="M1.4,2.1c0,0,86,57,211.5,41.5s172.5-24.5,289,81"/>
<polyline id="arrow" points="0,-9 18,0 0,9 5,0" fill="#db5862">
<animateMotion rotate="auto" begin="1s" dur="1.6s" repeatCount="1" fill="freeze">
<mpath xlink:href="#Path-1" />
</animateMotion>
</polyline>
</g>
</svg>
</div>
</body>
</html>2. CSS Arrows
Made by CY Park. 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>
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: #888;
text-align: center;
}
.arrow {
width: 100px;
height: 100px;
margin: 20px;
display: inline-block;
position: relative;
}
.arrow::before {
content: "";
display: block;
width: 30px;
height: 30px;
top: 50%;
left: 50%;
border-style: solid;
border-color: #000;
border-width: 2px 2px 0 0;
position: absolute;
transform-origin: 50% 50%;
}
.arrow.left::before {
transform: rotate(-135deg);
margin: -15px 0 0 -10px;
}
.arrow.up::before {
transform: rotate(-45deg);
margin: -10px 0 0 -15px;
}
.arrow.down::before {
transform: rotate(135deg);
margin: -20px 0 0 -15px;
}
.arrow.right::before {
transform: rotate(45deg);
margin: -15px 0 0 -20px;
}
.arrow::after {
content: "";
display: block;
top: 50%;
left: 50%;
border-style: solid;
border-color: #000;
position: absolute;
transform-origin: 50% 50%;
}
.arrow.left::after {
width: 40px;
height: 0;
border-width: 2px 0 0 0;
transform: translate(-14px, -1px);
}
.arrow.up::after {
width: 0;
height: 40px;
border-width: 0 2px 0 0;
transform: translate(-1px, -14px);
}
.arrow.down::after {
width: 0;
height: 40px;
border-width: 0 2px 0 0;
transform: translate(-1px, -26px);
}
.arrow.right::after {
width: 40px;
height: 0;
border-width: 2px 0 0 0;
transform: translate(-26px, -1px);
}
.arrow.circle {
background: rgba(233, 233, 180, 0.75);
border-radius: 50px;
}
.arrow.debug {
outline: 1px solid darkblue;
}
.arrow.debug::before {
outline: 1px solid red;
}
</style>
</head>
<body>
<h1>Arrows</h1>
<span class="arrow left"></span>
<span class="arrow up"></span>
<span class="arrow down"></span>
<span class="arrow right"></span>
<br/><br/><br/>
<h1>Arrows in Circles</h1>
<span class="arrow circle left"></span>
<span class="arrow circle up"></span>
<span class="arrow circle down"></span>
<span class="arrow circle right"></span>
<br/><br/><br/>
<h1>Arrows Design Plans</h1>
<span class="arrow circle debug left"></span>
<span class="arrow circle debug up"></span>
<span class="arrow circle debug down"></span>
<span class="arrow circle debug right"></span>
<span class="arrow circle debug"></span>
</body>
</html>3. Curved Arrow
Made by Bri Garrett. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
/* Pretty Stuff? */
html {
background: #011F2A;
}
.things > .content {
float: left;
width: 50%;
height: 500px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.things > .content h1 {
font-family: 'Arial', sans-serif;
text-transform: uppercase;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;
height: 150px;
color: #89323B;
}
/* Arrow */
.arrow {
position: relative;
margin: 0 auto;
width: 100px;
}
.arrow .curve {
border: 2px solid #BE5F4B;
border-color: transparent transparent transparent #BE5F4B;
height: 360px;
width: 1200px;
border-radius: 230px 0 0 150px;
}
.arrow .point {
position: absolute;
left: 40px;
top: 315px;
}
.arrow .point:before, .arrow .point:after {
border: 1px solid #BE5F4B;
height: 25px;
content: "";
position: absolute;
}
.arrow .point:before {
top: -11px;
left: -11px;
transform:rotate(-74deg);
-webkit-transform:rotate(-74deg);
-moz-transform:rotate(-74deg);
-ms-transform: rotate(-74deg);
}
.arrow .point:after {
top: -20px;
left: 5px;
transform:rotate(12deg);
-webkit-transform: rotate(12deg);
-moz-transform:rotate(12deg);
-ms-transform: rotate(12deg);
}
</style>
</head>
<body>
<div class="things">
<div class="content">
<div class="arrow">
<div class="curve"></div>
<div class="point"></div>
</div>
</div>
<div class="content">
<h1>Curved Arrow</h1>
</div>
</div>
</body>
</html>4. Scroll down animated arrow
Made by Rodrigo. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
background:#023031;
}
.arrows {
width: 60px;
height: 72px;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 20px;
}
.arrows path {
stroke: #FFFFFF;
fill: transparent;
stroke-width: 1px;
animation: arrow 2s infinite;
-webkit-animation: arrow 2s infinite;
}
@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}
@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}
.arrows path.a1 {
animation-delay:-1s;
-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}
.arrows path.a2 {
animation-delay:-0.5s;
-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}
.arrows path.a3 {
animation-delay:0s;
-webkit-animation-delay:0s; /* Safari 和 Chrome */
}
</style>
</head>
<body>
<svg class="arrows">
<path class="a1" d="M0 0 L30 32 L60 0"></path>
<path class="a2" d="M0 20 L30 52 L60 20"></path>
<path class="a3" d="M0 40 L30 72 L60 40"></path>
</svg>
</body>
</html>5. Animated CSS arrows
Made by Ed Tschoepe. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
#arrowAnim {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.arrow {
width: 5vw;
height: 5vw;
border: 2.5vw solid;
border-color: black transparent transparent black;
transform: rotate(-45deg);
}
.arrowSliding {
position: absolute;
-webkit-animation: slide 4s linear infinite;
animation: slide 4s linear infinite;
}
.delay1 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.delay2 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.delay3 {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
@-webkit-keyframes slide {
0% { opacity:0; transform: translateX(15vw); }
20% { opacity:1; transform: translateX(9vw); }
80% { opacity:1; transform: translateX(-9vw); }
100% { opacity:0; transform: translateX(-15vw); }
}
@keyframes slide {
0% { opacity:0; transform: translateX(15vw); }
20% { opacity:1; transform: translateX(9vw); }
80% { opacity:1; transform: translateX(-9vw); }
100% { opacity:0; transform: translateX(-15vw); }
}
</style>
</head>
<body>
<div id="arrowAnim">
<div class="arrowSliding">
<div class="arrow"></div>
</div>
<div class="arrowSliding delay1">
<div class="arrow"></div>
</div>
<div class="arrowSliding delay2">
<div class="arrow"></div>
</div>
<div class="arrowSliding delay3">
<div class="arrow"></div>
</div>
</div>
</body>
</html>6. CTA Arrow Hover Effect
Made by Shawn Looi. 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>
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html,
body {
background: #ffffff;
height: 100%;
font-family: "Helvetica Neue LT W01_41488878";
font-size: 16px;
line-height: 26px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
ul li {
margin: 0 0 24px;
}
.the-arrow {
width: 1px;
transition: all 0.2s;
}
.the-arrow.-left {
position: absolute;
top: 60%;
left: 0;
}
.the-arrow.-left > .shaft {
width: 0;
background-color: #4c4c4c;
}
.the-arrow.-left > .shaft:before, .the-arrow.-left > .shaft:after {
width: 0;
background-color: #4c4c4c;
}
.the-arrow.-left > .shaft:before {
transform: rotate(0);
}
.the-arrow.-left > .shaft:after {
transform: rotate(0);
}
.the-arrow.-right {
top: 3px;
}
.the-arrow.-right > .shaft {
width: 1px;
transition-delay: 0.2s;
}
.the-arrow.-right > .shaft:before, .the-arrow.-right > .shaft:after {
width: 8px;
transition-delay: 0.3s;
transition: all 0.5s;
}
.the-arrow.-right > .shaft:before {
transform: rotate(40deg);
}
.the-arrow.-right > .shaft:after {
transform: rotate(-40deg);
}
.the-arrow > .shaft {
background-color: #4c4c4c;
display: block;
height: 1px;
position: relative;
transition: all 0.2s;
transition-delay: 0;
will-change: transform;
}
.the-arrow > .shaft:before, .the-arrow > .shaft:after {
background-color: #4c4c4c;
content: "";
display: block;
height: 1px;
position: absolute;
top: 0;
right: 0;
transition: all 0.2s;
transition-delay: 0;
}
.the-arrow > .shaft:before {
transform-origin: top right;
}
.the-arrow > .shaft:after {
transform-origin: bottom right;
}
.animated-arrow {
display: inline-block;
color: #4c4c4c;
font-size: 1.25em;
font-style: italic;
text-decoration: none;
position: relative;
transition: all 0.2s;
}
.animated-arrow:hover {
color: #808080;
}
.animated-arrow:hover > .the-arrow.-left > .shaft {
width: 64px;
transition-delay: 0.1s;
background-color: #808080;
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before, .animated-arrow:hover > .the-arrow.-left > .shaft:after {
width: 8px;
transition-delay: 0.1s;
background-color: #808080;
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before {
transform: rotate(40deg);
}
.animated-arrow:hover > .the-arrow.-left > .shaft:after {
transform: rotate(-40deg);
}
.animated-arrow:hover > .main {
transform: translateX(17px);
transform: translateX(80px);
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft {
width: 0;
transform: translateX(200%);
transition-delay: 0;
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:before, .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
width: 0;
transition-delay: 0;
transition: all 0.1s;
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:before {
transform: rotate(0);
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
transform: rotate(0);
}
.animated-arrow > .main {
display: flex;
align-items: center;
transition: all 0.2s;
}
.animated-arrow > .main > .text {
margin: 0 16px 0 0;
line-height: 1;
}
.animated-arrow > .main > .the-arrow {
position: relative;
}
</style>
</head>
<body>
<div class='container'>
<ul>
<li>
<a class='animated-arrow' href='https://google.com'>
<span class='the-arrow -left'>
<span class='shaft'></span>
</span>
<span class='main'>
<span class='text'>
Explore More
</span>
<span class='the-arrow -right'>
<span class='shaft'></span>
</span>
</span>
</a>
</li>
</ul>
</div>
</body>
</html>7. Awesome Arrow icon. ONLY CSS.
Made by XzF. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
background-color: #00b894;
margin: 0;
padding: 0;
}
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 80px;
height: 60px;
cursor: pointer;
}
.arrow {
position: absolute;
top: 25px;
width: 90%;
height: 10px;
background-color: #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
animation: arrow 700ms linear infinite;
}
.arrow::after, .arrow::before {
content: '';
position: absolute;
width: 60%;
height: 10px;
right: -8px;
background-color: #fff;
}
.arrow::after {
top: -12px;
transform: rotate(45deg);
}
.arrow::before {
top: 12px;
box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="icon">
<div class="arrow"></div>
</div>
</body>
</html>8. CSS animated arrow down
Made by Leslie Lai. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 90vh;
}
.icon-down {
position: relative;
-webkit-animation: icon-down-animations 2s ease-in 1s infinite alternate;
animation: icon-down-animations 2s ease-in 1s infinite alternate;
}
@-webkit-keyframes icon-down-animations {
0% {
top: 12px;
opacity: 1;
}
50% {
opacity: 0.5;
}
75% {
top: 0;
opacity: 0;
}
100% {
top: 0;
opacity: 0;
}
}
@keyframes icon-down-animations {
0% {
top: 12px;
opacity: 1;
}
50% {
opacity: 0.5;
}
75% {
top: 0;
opacity: 0;
}
100% {
top: 0;
opacity: 0;
}
}
</style>
</head>
<body>
<a class="icon-down">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 28 28">
<path d="M26.297 12.625l-11.594 11.578c-0.391 0.391-1.016 0.391-1.406 0l-11.594-11.578c-0.391-0.391-0.391-1.031 0-1.422l2.594-2.578c0.391-0.391 1.016-0.391 1.406 0l8.297 8.297 8.297-8.297c0.391-0.391 1.016-0.391 1.406 0l2.594 2.578c0.391 0.391 0.391 1.031 0 1.422z"></path>
</svg>
</a>
</body>
</html>9. Arrow Ani
Made by eminozlem. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<style>
.arrow-hint {
bottom: 60px;
height: 88px;
left: 50%;
margin-left: -12px;
overflow: hidden;
position: absolute;
width: 24px;
}
.animated-arrow-1 {
-webkit-animation: 3s ease-out 0s normal none infinite running arrow1;
animation: 3s ease-out 0s normal none infinite running arrow1;
opacity: 0;
}
.icon-arrow-hint {
display: block;
margin-bottom: 20px;
}
.icon {
display: inline-block;
overflow: hidden;
}
.icon-arrow-hint {
background-position: 0 0;
height: 15px;
width: 24px;
}
.animated-arrow-1 {
-webkit-animation: 3s ease-out 0s normal none infinite running arrow1;
animation: 3s ease-out 0s normal none infinite running arrow1;
opacity: 0;
}
.animated-arrow-2 {
-webkit-animation: 3s ease-in 0s normal none infinite running arrow2;
animation: 3s ease-in 0s normal none infinite running arrow2;
opacity: 1;
}
</style>
</head>
<body>
<div class="arrow-hint">
<a href="#start" class="gweb-smoothscroll-control">
<div class="icon icon-arrow-hint animated-arrow-1">
<i class="fa fa-chevron-down"></i>
<!---->
</div>
<div class="icon icon-arrow-hint animated-arrow-2">
<i class="fa fa-chevron-down"></i>
<!---->
</div>
</a>
</div>
</body>
</html>10. CSS Animated Arrow Icon
Made by Matt Braun. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: lightcoral;
}
.arrow-icon {
background-color: lightcoral;
height: 2.8em;
width: 2.8em;
display: block;
padding: 0.5em;
margin: 1em auto;
position: relative;
cursor: pointer;
border-radius: 4px;
}
.left-bar {
position: absolute;
background-color: transparent;
top: 0;
left: 0;
width: 40px;
height: 10px;
display: block;
transform: rotate(35deg);
float: right;
border-radius: 2px;
}
.left-bar:after {
content: "";
background-color: white;
width: 40px;
height: 10px;
display: block;
float: right;
border-radius: 6px 10px 10px 6px;
transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
z-index: -1;
}
.right-bar {
position: absolute;
background-color: transparent;
top: 0px;
left: 26px;
width: 40px;
height: 10px;
display: block;
transform: rotate(-35deg);
float: right;
border-radius: 2px;
}
.right-bar:after {
content: "";
background-color: white;
width: 40px;
height: 10px;
display: block;
float: right;
border-radius: 10px 6px 6px 10px;
transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
z-index: -1;
}
.open .left-bar:after {
transform-origin: center center;
transform: rotate(-70deg);
}
.open .right-bar:after {
transform-origin: center center;
transform: rotate(70deg);
}
</style>
</head>
<body>
<a class="arrow-icon">
<span class="left-bar"></span>
<span class="right-bar"></span>
</a>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script id="rendered-js" >
$(".arrow-icon").click(function () {
$(this).toggleClass("open");
});
//# sourceURL=pen.js
</script>
</body>
</html>11. Animated Arrow Button
Made by ViktorKorolyuk. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body{
display: flex;
height: 100vh;
flex-direction: column;
justify-content: center;
}
h1 {
font-family: sans-serif;
font-weight: 100;
margin: 0 auto;
margin-bottom: 2rem;
}
.arrow {
--delay: 0.15s;
--colour: #03588C;
position: relative;
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
border: 3px solid var(--colour);
box-sizing: border-box;
transition: all .5s ease;
}
.arrow::before, .arrow::after {
content:"";
position: absolute;
display: block;
box-sizing: border-box;
transition: all var(--delay) ease-in-out;
}
/* The arrow body */
.arrow::before {
width: 0%;
height: 3px;
left: -50px;
top: 50%;
background: var(--colour);
transform: translate(0, -50%);
}
/* The arrow head */
.arrow::after {
width: 20px;
height: 20px;
left: 21px;
top: 50%;
border: 3px solid var(--colour);
border-left: 0;
border-bottom: 0;
transform: translate(50%, -50%) rotate(45deg);
}
.arrow:hover {
cursor: pointer;
border-color:transparent;
transition: all var(--delay) ease;
}
.arrow:hover::before {
opacity: 1;
left:-5px;
width: calc(100% + 5px);
}
.arrow:hover::after {
width: 30px;
height: 30px;
left: calc(100px - 46px/2);
transform: translate(-50%, -50%) rotate(45deg);
}
</style>
</head>
<body>
<h1>Hover below</h1>
<a class="arrow"></a>
</body>
</html>12. Arrowed
Made by SC. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
/* ------------------- */
/* TEMPLATE -- */
/* ----------------- */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
body {
height: 100%; width: 100%;
background-color: #333;
color: whitesmoke;
font-size: 16px;
font-family: 'Lato';
overflow: hidden;
}
h1 { font-size: 32px; }
.container {
max-width: 960px;
height: 100%;
margin: 0 auto;
padding: 20px;
}
.flexwrap {
display: flex;
flex-wrap: wrap;
}
/* ------------------- */
/* PEN STYLES -- */
/* ----------------- */
/* Arrow holder */
.arrowed {
position: relative;
height: 200px; width: 200px;
margin: 0 20px 20px 0;
border: 1px solid rgba(0,0,0,0.25);
}
/* Just centering the examples */
.arrowed div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
/* -- ARROW 1 -- */
.arrow-1 {
height: 15px; width: 15px;
border: 1px solid tomato;
border-width: 2px 2px 0 0;
transform: rotate(45deg);
}
/* -- ARROW 2 -- */
.arrow-2 {
height: 10px; width: 10px;
border: 1px solid mediumorchid;
border-width: 1px 1px 0 0;
transform: rotate(45deg);
}
.arrow-2:after {
content: '';
display: block;
height: 10px; width: 10px;
border: 1px solid mediumorchid;
border-width: 1px 1px 0 0;
/* Parent's rotation also
rotates transform axis */
/* Add width of border to Y */
transform: translate(5px, -6px);
/* rotate handled by parent */
}
/* -- ARROW 3 -- */
.arrow-3 {
height: 0px; width: 0px;
border: 8px solid;
border-color:
mediumseagreen
mediumseagreen
transparent
transparent;
transform: rotate(45deg);
}
/* -- ARROW 4 -- */
.arrow-4 {
/* duplicate the triange */
position: relative;
height: 0px; width: 0px;
border: 8px solid;
border-color:
darkorange
darkorange
transparent
transparent;
transform: rotate(45deg);
}
.arrow-4:before, .arrow-4:after {
content: '';
display: block;
position: absolute;
/* set up more triangles */
height: 0; width: 0;
/* half the parent border
rounded up */
border: 5px solid;
}
.arrow-4:before {
border-color:
darkorange
transparent
transparent
darkorange;
display: block;
top: -1px; right: 0px;
transform-origin: top right;
transform: rotate(45deg);
}
.arrow-4:after {
border-color:
transparent
darkorange
darkorange
transparent;
top: 0px; right: -1px;
transform-origin: top right;
transform: rotate(-45deg);
}
/* -- ARROW 5 -- */
.arrow-5 {
/* more triangle */
position: relative;
height: 0px; width: 0px;
border: 12px solid;
border-color:
darkcyan
darkcyan
transparent
transparent;
transform: rotate(45deg);
}
.arrow-5:before {
content: '';
position: absolute;
top: 0px; right: 0px;
display: block;
height: 12px; width: 16px;
background-color: darkcyan;
transform:
rotate(-45deg)
translate(2px, 1px);
}
/* -- ARROW 6 -- */
.arrow-6 {
/* more triangle */
height: 10px; width: 10px;
border: 1px solid rgba(255, 255, 255, 0.6);
border-width: 3px 3px 0 0;
transform: rotate(45deg);
}
.arrow-6:before, .arrow-6:after {
content: '';
position: absolute;
display: block;
height: 10px; width: 10px;
border-width: 3px 3px 0 0;
}
.arrow-6:before {
border: 1px solid rgba(255, 255, 255, 0.3);
border-width: 3px 3px 0 0;
/* top - distance minus border */
top: 7px; left: -10px;
}
.arrow-6:after {
border: 1px solid rgba(255, 255, 255, 1);
border-width: 3px 3px 0 0;
/* top - distance plus border */
top: -13px; left: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Arrows</h1>
<div class="flexwrap">
<div class="arrowed">
<div class="arrow-1"></div>
</div>
<div class="arrowed">
<div class="arrow-2"></div>
</div>
<div class="arrowed">
<div class="arrow-3"></div>
</div>
<div class="arrowed">
<div class="arrow-4"></div>
</div>
<div class="arrowed">
<div class="arrow-5"></div>
</div>
<div class="arrowed">
<div class="arrow-6"></div>
</div>
<div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>13. Animated scroll-down icon
Made by Chen Hui Jing. 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-color: black;
}
svg {
display: block;
margin: 2em auto;
}
/*animated scroll arrow animation*/
@-webkit-keyframes bounce {
0% {
-webkit-transform: translate(0, -5px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: translate(0, 5px);
opacity: 0;
}
}
@keyframes bounce {
0% {
transform: translate(0, -5px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translate(0, 5px);
opacity: 0;
}
}
.bounce {
-webkit-animation: bounce 1s ease-in-out infinite;
animation: bounce 1s ease-in-out infinite;
}
@keyframes arrow1 {
0% {
opacity: 0;
}
5% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes arrow1 /*Safari and Chrome*/ {
0% {
opacity: 0;
}
5% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes arrow2 {
0% {
opacity: 0;
}
15% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes arrow2 /*Safari and Chrome*/ {
0% {
opacity: 0;
}
15% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes arrow3 {
0% {
opacity: 0;
}
35% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes arrow3 /*Safari and Chrome*/ {
0% {
opacity: 0;
}
35% {
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
path.a1 {
animation: arrow1 1.3s infinite;
-webkit-animation: arrow1 1.3s infinite;
}
path.a2 {
animation: arrow2 1.3s infinite;
-webkit-animation: arrow2 1.3s infinite;
}
path.a3 {
animation: arrow3 1.3s infinite;
-webkit-animation: arrow3 1.3s infinite;
}
</style>
</head>
<body>
<svg width="21px" height="53px" viewBox="0 0 21 53"><style>.style0{fill:#fff;}.style1{stroke:#fff;stroke-width:2.5;stroke-linecap:round;}</style><path d="M9.42307692,0.085483871 C4.14615385,0.683391195 0,5.64602199 0,11.684886 L0,28.426291 C0,34.8537948 4.71153846,40.0854839 10.5,40.0854839 C16.2884615,40.0854839 21,34.8537948 21,28.426291 L21,11.684886 C21,5.64602199 16.8538462,0.683391195 11.5769231,0.085483871 L9.42307692,0.085483871 Z M19,28.6278568 C19,33.8448059 15.1887097,38.0854839 10.5,38.0854839 C5.81129032,38.0854839 2,33.8448059 2,28.6278568 L2,11.543111 C2,6.32616184 5.81129032,2.08548387 10.5,2.08548387 C15.1887097,2.08548387 19,6.32616184 19,11.543111 L19,28.6278568 L19,28.6278568 Z" class="style0"/><path d="M10.5,11.9188172 C11.6045695,11.9188172 12.5,11.0233867 12.5,9.9188172 C12.5,8.8142477 11.6045695,7.9188172 10.5,7.9188172 C9.3954305,7.9188172 8.5,8.8142477 8.5,9.9188172 C8.5,11.0233867 9.3954305,11.9188172 10.5,11.9188172 Z" class="style0"/><g class="arrows"><path d="M10.5,23.7903226 L10.5,30.0200975" class="style1 a1"/><path d="M10.5,34.7903226 L10.5,41.0200975" class="style1 a2"/><path d="M10.5,45.6717982 L10.5,51.9015732" class="style1 a3"/><path d="M6 48 L10.5 52 " class="style1 a3"/><path d="M15,48 L10.5,51.9999994" class="style1 a3"/></g></svg>
</body>
</html>14. Animated Curved Arrow
Made by Nicolas. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
#animation-line {
animation: line-animation 5000ms linear infinite normal forwards
}
@keyframes line-animation {
0% {stroke-dashoffset: 1;
animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)}
40% {stroke-dashoffset: 0}
80% {stroke-dashoffset: 0;animation-timing-function: cubic-bezier(0.420000,0,0.580000,1)
}
100% {stroke-dashoffset: 1} }
</style>
</head>
<body>
<svg width="260" height="259" viewBox="0 0 260 259" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="animation-line" pathLength="1" d="M253.64 1.361C258.924 30.3255 261.455 53.5994 254.565 79.0892C245.937 111.009 229.99 132.532 207.295 152.157C183.409 172.811 155.458 190.257 124.231 198.706C98.1889 205.752 70.4934 209.64 43.4996 214.196C30.0808 216.46 16.0511 217.177 2.75643 219.745C2.37381 219.818 1.31905 221.606 1.75977 221.803C19.3891 229.671 36.1097 235.951 52.7039 249.128C53.7405 249.951 62.505 258.107 60.9586 257.215C57.1281 255.006 53.507 252.55 49.7998 249.941C40.1686 243.162 29.9243 237.58 20.7741 229.779C17.5984 227.071 9.50862 221.752 8.2089 217.381C6.5112 211.67 12.4862 204.058 14.5281 200.478C18.3974 193.695 23.2437 187.687 28.0455 181.782C30.2906 179.021 39.6318 168.29 32.1885 176.191" stroke="black" stroke-width="2" stroke-linecap="round" fill="none" stroke-linejoin="round" stroke-dashoffset="1" stroke-dasharray="1"/>
</svg>
</body>
</html>15. CSS arrow #2
Made by Naoya. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
ul {
margin: 1.5em 2em 1em;
text-align: center;
list-style: none;
}
ul + ul {
margin-top: -1em;
}
ul li {
display: inline-block;
margin: 40px;
}
/* arrow common style */
.arrow {
display: inline-block;
width: 15px;
height: 15px;
border-top: 2px solid #000;
border-right: 2px solid #000;
}
.arrow-top {
transform: rotate(-45deg);
}
.arrow-right {
transform: rotate(45deg);
}
.arrow-bottom {
transform: rotate(135deg);
}
.arrow-left {
transform: rotate(-135deg);
}
.arrow-top-narrow {
transform: rotate(-45deg) skew(-15deg, -15deg);
}
.arrow-top-wide {
transform: rotate(-45deg) skew(7deg, 7deg);
}
.arrow-top-left {
transform: rotate(-90deg) skew(-10deg, -10deg);
}
.arrow-top-right {
transform: rotate(0) skew(-10deg, -10deg);
}
.arrow-bottom-left {
transform: rotate(180deg) skew(-10deg, -10deg);
}
.arrow-bottom-right {
transform: rotate(90deg) skew(-10deg, -10deg);
}
</style>
</head>
<body>
<ul>
<li><span class="arrow arrow-top"></span></li>
<li><span class="arrow arrow-right"></span></li>
<li><span class="arrow arrow-bottom"></span></li>
<li><span class="arrow arrow-left"></span></li>
<li><span class="arrow arrow-top-narrow"></span></li>
<li><span class="arrow arrow-top-wide"></span></li>
</ul>
<uL>
<li><span class="arrow arrow-top-left"></span></li>
<li><span class="arrow arrow-top-right"></span></li>
<li><span class="arrow arrow-bottom-left"></span></li>
<li><span class="arrow arrow-bottom-right"></span></li>
</ul>
</body>
</html>16. Arrow Link Animation
Made by Kellie Kowalski. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
padding: 4em;
background: #2C292E;
font-family: 'Nunito', sans-serif;
}
div {
max-width: 640px;
}
h1 {
color: #ccc;
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 2px;
}
p {
color: #fefefe;
font-size: 2em;
}
a {
position: relative;
color: #50DF8F;
text-decoration: none;
font-size: 2em;
}
a:before,
a:after {
content: '';
display: block;
position: absolute;
height: 2px;
top: 50%;
background: #50DF8F;
border-radius: 4px;
transition: all 0.3s;
}
a:before {
width: 148px;
right: 110%;
}
a:after {
width: 0%;
left: 110%;
}
a:hover:before {
width: 0%;
}
a:hover:after {
width: 60px;
}
a span {
position: absolute;
display: block;
width: 60px;
height: 100%;
right: -30%;
top: 0;
}
a span:before,
a span:after {
content:'';
display: block;
position: absolute;
width: 0;
height: 2px;
top: 0;
right: 0;
background: #50DF8F;
border-radius: 4px;
transform: rotate(45deg);
transition: all 0.15s;
transition-delay: 0.25s;
opacity: 0;
}
a span:before {
top: 30px;
right: 0;
transform: rotate(45deg);
}
a span:after {
top: 14px;
right: 0;
transform: rotate(-45deg);
}
a:hover span:before {
width: 24px;
top: 14px;
right: -4px;
opacity: 1;
}
a:hover span:after {
width: 24px;
top: 30px;
right: -4px;
opacity: 1;
}
</style>
</head>
<body>
<div class="card">
<a href="#">Animated Arrow Link<span></span></a>
</div>
</body>
</html>