This post contains a total of 12+ CSS Scroll Down Arrow Examples with Source Code. All these Scroll Down Arrows are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Scroll Down Arrow Examples
1. Scroll Down Arrow with Ripple Effect
Made by J. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<style>
/* icon: https://fortawesome.github.io/Font-Awesome/icons/ */
/* Animation: https://daneden.github.io/animate.css/ */
body{
background: #263238;
}
.arrow-container{
width: 100px;
height: 100px;
margin: 0 auto;
position: absolute;
bottom: 25px;
left: 0;
right: 0;
}
.arrow-1{
width: 100px;
height: 100px;
background: #00BCD4;
opacity: 0.5;
border-radius: 50%;
position: absolute;
}
.arrow-2{
width: 60px;
height: 60px;
background: #00BCD4;
border-radius: 50%;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
display: table;
}
.arrow-2:before{
width: 52px;
height: 52px;
content: "";
border: 2px solid #006064;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
}
.arrow-2 i.fa{
font-size: 30px;
display: table-cell;
vertical-align: middle;
text-align: center;
color: #006064;
}
/* Custom Animate.css */
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.4, .4, .4);
transform: scale3d(.4, .4, .4);
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.4, .4, .4);
transform: scale3d(.4, .4, .4);
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
</style>
</head>
<body>
<div class="arrow-container animated fadeInDown">
<div class="arrow-2">
<i class="fa fa-angle-down"></i>
</div>
<div class="arrow-1 animated hinge infinite zoomIn"></div>
</div>
</body>
</html>2. Amazing Mouse-scroll button
Made by Jose David Fumo. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
background: #464646;
}
#mouse-scroll {
style: block;
}
#mouse-scroll {
position: fixed;
margin: auto;
left: 50%;
top: 80px;
-webkit-transform: translateX(-50%);
z-index: 9999;
}
#mouse-scroll span{
display: block;
width: 5px;
height: 5px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
margin: 0 0 3px 5px;
}
#mouse-scroll .mouse {
height: 21px;
width: 14px;
border-radius: 10px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
border: 2px solid #ffffff;
top: 170px;
}
#mouse-scroll .down-arrow-1 {
margin-top: 6px;
}
#mouse-scroll .down-arrow-1, #mouse-scroll .down-arrow-2, #mouse-scroll .down-arrow-3 {
-webkit-animation: mouse-scroll 1s infinite;
-moz-animation: mouse-scroll 1s infinite:
}
#mouse-croll .down-arrow-1 {
-webkit-animation-delay: .1s;
-moz-animation-delay: .1s;
-webkit-animation-direction: alternate;
}
#mouse-scroll .down-arrow-2 {
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-webkit-animation-direction: alternate;
}
#mouse-scroll .down-arrow-3 {
-webkit-animation-delay: .3s;
-moz-animation-dekay: .3s;
-webkit-animation-direction: alternate;
}
#mouse-scroll .mouse-in {
height: 5px;
width: 2px;
display: block;
margin: 5px auto;
background: #ffffff;
position: relative;
}
#mouse-scroll .mouse-in {
-webkit-animation: animated-mouse 1.2s ease infinite;
moz-animation: mouse-animated 1.2s ease infinite;
}
@-webkit-keyframes animated-mouse {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
}
}
@-webkit-keyframes mouse-scroll {
0% {
opacity: 1;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
@keyframes mouse-scroll {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<a href="#">
<div id="mouse-scroll">
<div class="mouse">
<div class="mouse-in"></div>
</div>
<div>
<span class="down-arrow-1"></span>
<span class="down-arrow-2"></span>
<span class="down-arrow-3"></span>
</div>
</div>
</a>
</body>
</html>3. scroll down arrow animation
Made by Mohan Raj. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
margin: 0;
background-color: #8FB4F1;
}
.spinner {
background: url(data:image/png;base64,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) no-repeat center;
display: block;
margin: 5% auto;
position: relative;
width: 159px;
height: 59px;
}
@-webkit-keyframes pulse {
0% {
opacity: 0;
background-position: center top;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
10% {
opacity: 0;
}
50% {
opacity: 1;
-moz-background-size: 20% auto;
-o-background-size: 20% auto;
-webkit-background-size: 20% auto;
background-size: 20% auto;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
background-position: center bottom;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
}
@-moz-keyframes pulse {
0% {
opacity: 0;
background-position: center top;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
10% {
opacity: 0;
}
50% {
opacity: 1;
-moz-background-size: 20% auto;
-o-background-size: 20% auto;
-webkit-background-size: 20% auto;
background-size: 20% auto;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
background-position: center bottom;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
}
@-ms-keyframes pulse {
0% {
opacity: 0;
background-position: center top;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
10% {
opacity: 0;
}
50% {
opacity: 1;
-moz-background-size: 20% auto;
-o-background-size: 20% auto;
-webkit-background-size: 20% auto;
background-size: 20% auto;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
background-position: center bottom;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
}
@keyframes pulse {
0% {
opacity: 0;
background-position: center top;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
10% {
opacity: 0;
}
50% {
opacity: 1;
-moz-background-size: 20% auto;
-o-background-size: 20% auto;
-webkit-background-size: 20% auto;
background-size: 20% auto;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
background-position: center bottom;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
}
.scroll-down a {
display: block;
opacity: 0;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
line-height: 0;
font-size: 0;
color: transparent;
margin-left: auto;
margin-right: auto;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
-webkit-animation: pulse 1.5s 0s infinite normal ease forwards;
-moz-animation: pulse 1.5s 0s infinite normal ease forwards;
-o-animation: pulse 1.5s 0s infinite normal ease forwards;
animation: pulse 1.5s 0s infinite normal ease forwards;
background-image: url(images/arrow-down.svg);
background-repeat: no-repeat;
}
.scroll-down a:before, .scroll-down a:after {
content: " ";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMzAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiMwMTM0NmIiIGQ9Ik0yMS44NSw3LjE2YzAsMC4zMDktMC4xMTgsMC42MTctMC4zNTMsMC44NTNsLTUuNjgxLDUuNjhjLTAuNDcxLDAuNDcxLTEuMjMzLDAuNDcxLTEuNzA0LDBsLTUuNjgxLTUuNjgNCgkJYy0wLjQ3LTAuNDcxLTAuNDctMS4yMzMsMC0xLjcwNGMwLjQ3MS0wLjQ3LDEuMjM0LTAuNDcsMS43MDQsMGw0LjgyOCw0LjgyOGw0LjgyOC00LjgyOGMwLjQ3Mi0wLjQ3LDEuMjM0LTAuNDcsMS43MDQsMA0KCQlDMjEuNzMxLDYuNTQzLDIxLjg1LDYuODUyLDIxLjg1LDcuMTZ6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==) no-repeat center top;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}
.scroll-down a:before {
-webkit-animation: pulse 1.5s 0.25s infinite normal ease forwards;
-moz-animation: pulse 1.5s 0.25s infinite normal ease forwards;
-o-animation: pulse 1.5s 0.25s infinite normal ease forwards;
animation: pulse 1.5s 0.25s infinite normal ease forwards;
}
.scroll-down a:after {
-webkit-animation: pulse 1.5s 0.5s infinite normal ease forwards;
-moz-animation: pulse 1.5s 0.5s infinite normal ease forwards;
-o-animation: pulse 1.5s 0.5s infinite normal ease forwards;
animation: pulse 1.5s 0.5s infinite normal ease forwards;
}
</style>
</head>
<body>
<div class="spinner scroll-down"> <a class="animate"></a> </div>
</body>
</html>4. Scroll Down Animation Arrow
Made by Dicson. Source
<!DOCTYPE html>
<html lang="en" class="Scroll Down">
<head>
<title></title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #1d1f20;
}
.bg {
background: url(https://vignette.wikia.nocookie.net/thehungergames/images/3/31/Cassandra_Oracion.jpg) no-repeat center;
background-size: cover;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
filter: blur(7px);
}
.c-scroll-icon {
width: 21px;
height: 100px;
transform: translate3d(-50%, 0%, 0);
position: absolute;
left: 50%;
bottom: 100px;
backface-visibility: hidden;
}
.c-scroll-icon .c-scroll-icon-line-mask {
position: relative;
overflow: hidden;
width: 21px;
height: 100px;
margin: 0 auto;
}
.c-scroll-icon .c-scroll-icon-line {
position: absolute;
display: inline-block;
width: 1px;
height: 150px;
border-left: 1px solid #fff;
top: -150px;
left: 10px;
animation: scroll-line 3s infinite;
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@keyframes scroll-line {
0% {
transform: translate3d(0, 0, 0);
}
40% {
transform: translate3d(0, 185px, 0);
}
75% {
transform: translate3d(0, 175px, 0);
}
100% {
transform: translate3d(0, 280px, 0);
}
}
.c-scroll-icon-triangle {
position: relative;
width: 20px;
height: 30px;
margin: -10px auto 0;
animation: triangle-bounce 3s infinite;
}
.c-scroll-icon-triangle-mask {
position: absolute;
}
.c-scroll-icon-triangle-mask.first {
width: 40px;
height: 5px;
right: 0;
overflow: hidden;
}
.c-scroll-icon-triangle-mask.right {
width: 10px;
height: 30px;
overflow: hidden;
right: 0;
}
.c-scroll-icon-triangle-mask.left {
width: 10px;
height: 30px;
overflow: hidden;
left: 1;
}
.c-scroll-icon-triangle-mask.last {
width: 40px;
height: 5px;
overflow: hidden;
}
.c-scroll-icon-triangle-line {
position: absolute;
}
.c-scroll-icon-triangle-line.first {
border-bottom: 1px solid #fff;
width: 30px;
right: 0;
animation: triangle-first 3s infinite;
transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.c-scroll-icon-triangle-line.right {
border-left: 1px solid #fff;
height: 44px;
transform: rotate(-163deg);
right: 5px;
top: -6px;
animation: triangle-right 3s infinite;
transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.c-scroll-icon-triangle-line.left {
border-left: 1px solid #fff;
height: 40px;
transform: rotate(163deg);
left: 5px;
top: -3px;
animation: triangle-left 3s infinite;
transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.c-scroll-icon-triangle-line.last {
border-bottom: 1px solid #fff;
width: 120px;
left: 0;
animation: triangle-last 3s infinite;
transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@keyframes triangle-bounce {
0% {
transform: translate3d(0, -5px, 0);
}
50% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: translate3d(0, -5px, 0);
}
}
@keyframes triangle-first {
0%,
20% {
transform: translate3d(-40px, 0, 0);
}
30%,
80% {
transform: translate3d(10px, 0, 0);
}
85%,
100% {
transform: translate3d(30px, 0, 0);
}
}
@keyframes triangle-right {
0%,
25% {
transform: rotate(-163deg) translate3d(0, 40px, 0);
}
40%,
84% {
transform: rotate(-163deg) translate3d(0, 0, 0);
}
90%,
100% {
transform: rotate(-163deg) translate3d(0, -37px, 0);
}
}
@keyframes triangle-left {
0%,
33% {
transform: rotate(163deg) translate3d(0, -34px, 0);
}
50%,
88% {
transform: rotate(163deg) translate3d(0, 0, 0);
}
95%,
100% {
transform: rotate(163deg) translate3d(0, 38px, 0);
}
}
@keyframes triangle-last {
0%,
87.5% {
transform: translate3d(-120px, 0, 0);
}
91% {
transform: translate3d(-80px, 0, 0);
}
100% {
transform: translate3d(45px, 0, 0);
}
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="c-scroll-icon">
<div class="c-scroll-icon-line-mask"><div class="c-scroll-icon-line"></div></div>
<div class="c-scroll-icon-triangle">
<div class="c-scroll-icon-triangle-mask first"><div class="c-scroll-icon-triangle-line first"></div></div>
<div class="c-scroll-icon-triangle-mask right"><div class="c-scroll-icon-triangle-line right"></div></div>
<div class="c-scroll-icon-triangle-mask left"><div class="c-scroll-icon-triangle-line left"></div></div>
<div class="c-scroll-icon-triangle-mask last"><div class="c-scroll-icon-triangle-line last"></div></div>
</div>
</div>
</body>
</html>5. Glowing Scroll Arrow CSS Animation
Made by Robin Bastien. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
background: rgba(105,155,200,0.9);
background: -moz-radial-gradient(top left, ellipse cover, rgba(105,155,200,1,0.9) 0%, rgba(181,197,216,1,0.9) 57%,0.9);
background: -webkit-gradient(radial, top left, 0px, top left, 100%, color-stop(0%,rgba(105,155,200,1,0.9),0.9), color-stop(57%,rgba(181,197,216,1,0.9),0.9),0.9);
background: -webkit-radial-gradient(top left, ellipse cover, rgba(105,155,200,1,0.9) 0%,rgba(181,197,216,1,0.9) 57%,0.9);
background: -o-radial-gradient(top left, ellipse cover, rgba(105,155,200,1,0.9) 0%,rgba(181,197,216,1,0.9) 57%,0.9);
background: -ms-radial-gradient(top left, ellipse cover, rgba(105,155,200,1,0.9) 0%,rgba(181,197,216,1,0.9) 57%,0.9);
background: radial-gradient(ellipse at top left, rgba(105,155,200,1,0.9) 0%,rgba(181,197,216,1,0.9) 57%,0.9);
text-align: center;
font-family: 'helvetica-neue',helvetica,sans-serif;
color: white;
vertical-align: middle;
margin: 5% 0;
}
.contain {display: inline-block; vertical-align: middle;}
h1, h2 {
font-size: 1.05em;
letter-spacing: 0.3em;
font-weight: 500;
text-transform: uppercase;
line-height: 1.4em;
}
h2 {
font-weight: 300;
font-size: 0.9em;
letter-spacing: 0.2em;
opacity: 0.8;
margin-bottom: 30px;
}
.button.scroll {
padding: 8px;
background: #111;
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
position: relative;
}
.scroll-down-arrow {
margin: 5px 0 0;
position: absolute;
left: 13px;
top: 7px;
-webkit-animation: bounce 1000ms ease infinite;
-moz-animation: bounce 1000ms ease infinite;
-o-animation: bounce 1000ms ease infinite;
animation: bounce 1000ms ease infinite;
-webkit-animation-timing-function: cubic-bezier(.14, .75, .2, 1.01);
-moz-animation-timing-function: cubic-bezier(.14, .75, .2, 1.01);
-ms-animation-timing-function: cubic-bezier(.14, .75, .2, 1.01);
animation-timing-function: cubic-bezier(.14, .75, .2, 1.01);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #f2f2f2;
content: "";
}
.button.scroll:before {
position: absolute;
top: 0;
left: 0;
box-shadow: 0px 0px 3px white, inset 0px 0px 3px white;
padding: 2px;
z-index: -1;
width: 32px;
height: 32px;
border-radius: 50%;
display: block;
content: "";
-webkit-animation: ring 1s alternate 0s infinite;
-moz-animation: ring 1s alternate 0s infinite;
-o-animation: ring 1s linear 0s infinite;
animation: ring 1s linear 0s infinite;
}
@-webkit-keyframes bounce {
0%, 100% {top: 9px; opacity: 0.5}
25% {top: 12px; opacity: 1}
50% {opacity: 0.8}
}
@keyframes bounce {
0%, 100% {top: 9px; opacity: 0.5}
25% {top: 12px; opacity: 1}
50% {opacity: 0.8}
}
@-webkit-keyframes ring {
0%, 100% {-webkit-transform: scale(1,1); opacity:1}
75% {-webkit-transform: scale(1.2,1.2); opacity:0.4}
}
@keyframes ring {
0%, 100% {transform: scale(1,1); opacity:1}
75% {transform: scale(1.2,1.2); opacity:0.4}
}
}
</style>
</head>
<body>
<div class="contain">
<h1>Lookit' Here Ma, I Coded Me a fine young glowy arrow!</h1>
<h2>...And it don't even run on gas, just CSS!</h2>
<a href="#personalStatement" class="button scroll">
<span class="scroll-down-arrow"></span>
</a>
</div>
</body>
</html>6. Simple Scroll Down Arrow
Made by Pramod Boda. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
#scrolldown{
display:block;
position:absolute;
width:50px;
height:25px;
left:50%;
margin-left:-25px;
bottom:50px;
background:url(https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-32.png) no-repeat;
background-size{ 100% 100%;}
-webkit-animation: arrowbounce 1s infinite;
-moz-animation: arrowbounce 1s infinite;
-o-animation: arrowbounce 1s infinite;
animation: arrowbounce 1s infinite;
}
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-webkit-animation-timing-function: eaze-in-out;
-moz-animation-timing-function: eaze-in-out;
}
</style>
</head>
<body>
<a id="scrolldown" href="#"></a>
</body>
</html>7. Scroll down arrow with Hover Animation
Made by Laura Montgomery. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
background: #283866;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.visually-hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
a {
position: relative;
}
@keyframes occasional-arrow-bounce {
0% { transform: translateY(0); }
79% { transform: translateY(0); }
80% { transform: translateY(2px); }
100% { transform: translateY(-4px); }
}
a:after {
color: white;
content: '\02193';
font-size: 40px;
position: absolute;
top: 50%;
margin-top: -28px;
left: 50%;
margin-left: -10px;
animation: occasional-arrow-bounce 3s infinite 2s alternate ease-out;
}
.circle {
height: 124px;
width: 124px;
}
.background {
fill: transparent;
stroke: rgba(255, 255, 255, 0.1);
transition: all 200ms ease;
}
.foreground {
fill: transparent;
stroke-dasharray: 377;
stroke-dashoffset: 377;
stroke: #fff;
transform-origin: 50% 50%;
transform: rotate(-90deg);
transition: all 800ms ease;
}
a:hover .foreground {
stroke-dashoffset: 0;
transform: rotate(90deg);
}
@keyframes arrow-bounce {
0% { transform: translateY(2px); }
100% { transform: translateY(-4px); }
}
a:hover:after {
animation: arrow-bounce 0.5s infinite alternate ease-out;
}
</style>
</head>
<body>
<a href="#">
<span class="visually-hidden">Scroll down you dafty</span>
<svg class="circle" xmlns="http://www.w3.org/2000/svg">
<g>
<ellipse class="background" ry="60" rx="60" cy="62.5" cx="62.5" stroke-width="1"/>
<ellipse class="foreground" ry="60" rx="60" cy="62.5" cx="62.5" stroke-width="2"/>
</g>
</svg>
</a>
</body>
</html>8. Animated Scroll Down Arrow
Made by Rakesh Raj. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
}
body {
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background: transparent;
transform: rotate(45deg);
border: 5px solid transparent;
border-bottom-color: #fff;
border-right-color: #fff;
animation: move 1000ms linear infinite alternate;
}
@keyframes move {
0% {
top: 116px;
}
100% {
top: 200px;
}
}
</style>
</head>
<body>
<html>
<head></head>
<body>
<div class="box"></div>
</body>
</html>
</body>
</html>9. CSS Scroll Down Arrow
Made by A Bakri. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
html {
scroll-behavior: smooth;
}
body {
text-align: center;
padding: 0;
margin: 0;
color: white;
font-size: 1.9vw;
}
#section1 {
background-color: #e82731;
display: table;
max-width: none;
width: 100%;
height: 100vh;
}
#section2 {
background-color: #0062FF;
display: table;
max-width: none;
width: 100%;
height: 100vh;
}
.scroll-down-arrow {
border-color: #ffffff;
border-width: 0vw 0.5vw 0.5vw 0vw;
border-style: solid;
height: 4.5vw;
width: 4.5vw;
transform: rotate(45deg);
transition: border-width 100ms;
margin: 0 auto;
}
.scroll-down-arrow:hover {
border-color: #0062FF;
border-width: 0vw 0.9vw 0.9vw 0vw;
}
</style>
</head>
<body>
<div id="section1">
<h1>CSS Scroll Down Arrow</h1>
<h1>Section 1</h1>
<a href="#section2"><div class="scroll-down-arrow"></div></a>
</div>
<div id="section2">
<h1>Section 2</h1>
</div>
</body>
</html>10. Scroll Down Arrow Wave
Made by Mario Windsor. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
text-align: center;
}
.arrow-wave {
display: inline-block;
cursor: pointer;
margin-top: 100px;
font-size: 0;
/* background-color: rgba(100,100,100,0.4); */
}
.arrow-wave span {
display: block;
position: relative;
height: 10px;
width: 16px;
/* background-color: rgba(100,100,100,0.4); */
opacity: 0.2;
}
.arrow-wave span::before,
.arrow-wave span::after {
display: block;
content: "";
position: absolute;
height: 2px;
width: 12px;
background-color: #454545;
}
.arrow-wave span::before {
top: -2px;
left: 0;
transform-origin: left center;
transform: rotate(45deg);
}
.arrow-wave span::after {
top: -2px;
right: 0;
transform-origin: right center;
transform: rotate(-45deg);
}
.arrow-wave span:nth-child(1n) {
animation: animate-arrow-wave 2s infinite;
animation-delay: .25s;
}
.arrow-wave span:nth-child(2n) {
animation: animate-arrow-wave 2s infinite;
animation-delay: .50s;
}
.arrow-wave span:nth-child(3n) {
animation: animate-arrow-wave 2s infinite;
animation-delay: .75s;
}
@keyframes animate-arrow-wave {
0% { opacity: 0.2; }
25% { opacity: 0.2; }
50% { opacity: 0.2; }
75% { opacity: 1.0; }
100% { opacity: 0.2; }
}
</style>
</head>
<body>
<div class="arrow-wave">
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>11. Limitations – Animated Scroll-down Arrow
Made by Miranda. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
background: #333a4d;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.line-container {
width: 1px;
height: 44px;
position: relative;
margin-bottom: 100px;
}
.line {
position: absolute;
width: 2px;
height: 0px;
background-color: #fff;
top: 0;
bottom: initial;
animation: line-animation 2.5s ease-in-out 0s infinite normal;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.line::before {
content: " ";
width: 16px;
height: 16px;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
transform: rotate(45deg);
display: block;
position: absolute;
bottom: 0;
animation: arrow-animation 2.5s ease-in-out 0s infinite normal;
}
@keyframes line-animation {
0% {
height: 0px;
top: 0px;
opacity: 0;
}
50% {
height: 44px;
top: 0px;
opacity: 1;
}
100% {
height: 0px;
top: 44px;
opacity: 0;
}
}
@keyframes arrow-animation {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="line-container">
<div class="line"></div>
</div>
</div>
</body>
</html>12. Simple Animated Scroll Down Arrow
Made by Santosh ban. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
/*
============
Down Arrow
============
*/
#scroll-down:hover,
#scroll-down:focus{
cursor: pointer;
}
#arrow-wrapper {
display: table;
width:100%;
height:100%;
}
#arrow-wrapper-inner {
display: table-cell;
vertical-align:middle;
width:100%;
height:100%;
text-align: center
}
#scroll-down {
display: inline-block;
position: relative;
padding-top: 79px;
text-align:center;
}
.arrow-down {
display: block;
margin: 0 auto;
width: 14px;
height: 25px;
}
.arrow-down:after {
content: '';
display: block;
margin: 0;
padding: 0;
width: 12px;
height: 12px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
behavior: url(-ms-transform.htc);
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
#scroll-down::before {
-webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* Safari 4+ */
-moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* Fx 5+ */
-o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* Opera 12+ */
animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* IE 10+, Fx 29+ */
position: absolute;
top: 53px;
left: 50%;
margin-left: -1px;
width: 1px;
height: 40px;
background: #000000;
content: ' ';
}
@-webkit-keyframes elasticus {
0% {
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
}
50% {
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
50.1% {
-webkit-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
}
}
@-moz-keyframes elasticus {
0% {
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
}
50% {
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
50.1% {
-webkit-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
}
}
@-o-keyframes elasticus {
0% {
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
}
50% {
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
50.1% {
-webkit-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
}
}
@keyframes elasticus {
0% {
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
}
50% {
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
50.1% {
-webkit-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
}
}
/*
===============
End Down Arrow
===============
*/
</style>
</head>
<body>
<div id="arrow-wrapper" onclick="window.open('#about', '_self');">
<div id="arrow-wrapper-inner">
<div id="scroll-down">
<span class="arrow-down">
<!-- css generated icon -->
</span>
</div>
</div>
</div>
</body>
</html>13. Scroll Down Indicator
Made by Justin Chang. 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>
* {
outline: none;
}
body {
background: #494949;
}
.scroll-down {
position: absolute;
z-index: 100;
bottom: 6rem;
left: 50%;
padding: 2rem;
cursor: pointer;
transition: color 0.3s ease-out;
transform: translateX(-50%);
}
.scroll-down-arrow {
cursor: pointer;
width: 1.4rem;
height: 2.5rem;
fill: white;
transform: all 0.3s ease-out;
}
.scroll-down-arrow rect {
transform-origin: bottom;
-webkit-animation: arrow-bar 1s infinite ease-out;
animation: arrow-bar 1s infinite ease-out;
}
@-webkit-keyframes arrow-bar {
0% {
opacity: 0;
transform: translateY(-10px);
}
25% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.65);
}
50%, to {
opacity: 1;
}
to {
transform: scaleY(0);
}
}
@keyframes arrow-bar {
0% {
opacity: 0;
transform: translateY(-10px);
}
25% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.65);
}
50%, to {
opacity: 1;
}
to {
transform: scaleY(0);
}
}
.footer {
display: inline-block;
}
.footer .scroll-down {
position: fixed;
bottom: 2rem;
transform: translateX(-50%) rotate(180deg);
}
</style>
</head>
<body>
<div class="scroll-down">
<svg class="scroll-down-arrow" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12.1 22.2" style="enable-background:new 0 0 12.1 22.2;" xml:space="preserve">
<path class="st0" d="M6.1,20.2l-4.7-4.7c-0.3-0.3-0.8-0.3-1,0s-0.3,0.8,0,1l5.2,5.2c0.3,0.3,0.8,0.3,1,0l5.2-5.2
c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5c-0.3-0.3-0.8-0.3-1,0L6.1,20.2z"></path>
<line class="st0" x1="6.1" y1="0.2" x2="6.1" y2="20.2"></line>
<rect x="5.3" y="0.2" width="1.5" height="20"></rect>
</svg>
</div>
<div class="footer">
<div class="scroll-down">
<svg class="scroll-down-arrow" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12.1 22.2" style="enable-background:new 0 0 12.1 22.2;" xml:space="preserve">
<path class="st0" d="M6.1,20.2l-4.7-4.7c-0.3-0.3-0.8-0.3-1,0s-0.3,0.8,0,1l5.2,5.2c0.3,0.3,0.8,0.3,1,0l5.2-5.2
c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5c-0.3-0.3-0.8-0.3-1,0L6.1,20.2z"></path>
<line class="st0" x1="6.1" y1="0.2" x2="6.1" y2="20.2"></line>
<rect x="5.3" y="0.2" width="1.5" height="20"></rect>
</svg>
</div>
</div>
</body>
</html>