Scroll Down Button Design and Animation with HTML and CSS

In this demo, we will learn to create the animated mouse scroll button design. 

We will use only CSS properties to craft the effects. 

First, we will create a basic card structure where we will put our animated icons. 

In this, we will display simple cards with a dark background.

Card HTML Markup

<div class="card bg2">
        <p class="card__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem optio unde in libero expedita illo dolore, vero nemo
        at rem nobis assumenda cum quo quaerat aperiam, vel minus maiores fuga.</p>

Card CSS

.card {
  position: relative;
  box-sizing: border-box;
  margin: 15px 50px;
  width: 100%;
  height: 500px;
  border-radius: 4px;
  background-size: cover !important;
  background-position: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
}
.card.bg1 { background: url(../images/shallow-focus-of-white-mushroom-painting-733107.jpg); }
.card.bg2 { background: url(../images/concrete-road-surrounded-by-trees-831243.jpg); }
.card__content {
  font-family: monospace;
  font-weight: 600;
  color: #999999;
  line-height: 30px;
  font-size: 1rem;
}

Next, we will create the Scroll down btn markup. 

Scroll down button markup

<a href="javascript:;" class="scroll-down arrows">
	<span></span>
</a>

The above markup is common for all effects. 

We will add/subtract the element from the above markup according to the demos. 

Scroll down button CSS

/* Common Mouse Scroll Ele */
.scroll-down {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 75px;
  height: 80px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  bottom: 0;
  transform: translateX(-50%);
}
.scroll-down > label {
  pointer-events: none;
  font-family: monospace;
  font-weight: 600;
  font-size: 1.1rem;
  color: #dffffd;
}

Next, we will check the effects & animation one by one. 

Effect 1

HTML

<a href="javascript:;" class="scroll-down arrow">
     <label>Scroll</label>
     <span></span>
</a>

CSS

.scroll-down.arrow span {
  position: absolute;
  display: inline-block;
  top: 20px;
  height: 30px;
  width: 2px;
  left: calc(50% - 1px);
  animation: animateArrow 1.5s infinite linear;
}
@keyframes animateArrow {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(40px);
    opacity: 0;
  }
}
.scroll-down.arrow span::before,
.scroll-down.arrow span::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 3px;
}
.scroll-down.arrow span::before {
  transform-origin: bottom;
  transform: rotate(-45deg);
}
.scroll-down.arrow span::after {
  transform-origin: bottom;
  margin-left: -1px;
  transform: rotate(45deg);
}

Effect 2

HTML

<a href="javascript:;" class="scroll-down arrows">
  <label>Scroll</label>
  <span></span>
  <span></span>
  <span></span>
</a>

CSS

.scroll-down.arrows span {
  position: absolute;
  display: inline-block;
  top: 20px;
  height: 25px;
  width: 2px;
  left: calc(50% - 1px);
  animation: animateArrows 1.25s infinite linear;
}
@keyframes animateArrows {
  0%, 40%, 100% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
.scroll-down.arrows span:first-child {
  top: 35px;
  animation-delay: 0s;
}
.scroll-down.arrows span:nth-child(2) {
  top: 35px;
  animation-delay: .33s;
}
.scroll-down.arrows span:last-child {
  top:  50px;
  animation-delay: .66s;
}
.scroll-down.arrows span::before,
.scroll-down.arrows span::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 3px;
}
.scroll-down.arrows span::before {
  transform-origin: bottom;
  transform: rotate(-45deg);
}
.scroll-down.arrows span::after {
  transform-origin: bottom;
  margin-left: -1px;
  transform: rotate(45deg);
}

Effect 3

HTML

<a href="javascript:;" class="scroll-down mouse effect1">
  <label>Scroll</label>
  <span></span>
</a>

CSS

.scroll-down.mouse {
  height: 100px;
}
.scroll-down.mouse span {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 60px;
  border: 2px solid #fff;
  border-radius: 50px;
  top: 5px;
}

/* Effect 3 */
.scroll-down.mouse.effect1 span::after {
  position: absolute;
  content: "";
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #fff;
  animation: animateMousePointer 1.5s infinite;
}
@keyframes animateMousePointer {
  0% {
    transform: translateY(0);
  }
  50% {
    opacity: .7;
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

Effect 4

HTML

<a href="javascript:;" class="scroll-down mouse effect2">
  <label>Scroll</label>
  <span></span>
</a>

CSS

.scroll-down.mouse {
  height: 100px;
}
.scroll-down.mouse span {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 60px;
  border: 2px solid #fff;
  border-radius: 50px;
  top: 5px;
}
.scroll-down.mouse.effect2 span::after {
  position: absolute;
  content: "";
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 2px;
  height: 20px;
  border-radius: 2px;
  background: #fff;
  animation: animateMouseScrollBar 1.5s infinite linear;
}
@keyframes animateMouseScrollBar {
  0% {
    height: 20px;
    top: 10px;
  }
  50% {
    height: 0;
    top: 30px;
  }
  50.01% {
    top: 10px;
  }
  100%{
    height: 20px;
  }
}

Effect 5

HTML

<a href="javascript:;" class="scroll-down semicircle">
  <label>Scroll</label>
  <span>
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-down" width="30"
      height="30" viewBox="0 0 24 24" stroke-width="2" stroke="#2c3e50" fill="none" stroke-linecap="round"
      stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" />
      <line x1="12" y1="5" x2="12" y2="19" />
      <line x1="16" y1="15" x2="12" y2="19" />
      <line x1="8" y1="15" x2="12" y2="19" />
    </svg>
  </span>
</a>

CSS

.card.shape {
  overflow: hidden;
}
.card.shape::before, .card.shape::after {
  position: absolute;
  content: "";
  bottom: 0;
  width: 50%;
  height: 100px;
  background-color: #fff;
  z-index: 2;
}
.card.shape::before {
  left: 0;
  clip-path: polygon(0 50%, 0% 100%, 100% 100%);
}
.card.shape::after {
  left: 50%;
  clip-path: polygon(100% 50%, 0% 100%, 100% 100%);
}
.scroll-down.semicircle span {
  position: absolute;
  width: 100px;
  height: 100px;
  left: -10px;
  border-radius: 50%;
  background: #ffc2f0;
  bottom: -50px;
  display: inline-block;
  z-index: 1;
}
.scroll-down.semicircle span svg {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 15px;
  animation: animateLargeArrow 1.25s infinite linear;
}
@keyframes animateLargeArrow {
  0% {
    opacity: 0;
    top: 0;
  }
  25%, 75% {
    opacity: 1;
  }
  50% {
    top: 15px;
  }
  100% {
    opacity: 0;
    top: 30px;
  }
}

Effect 6

HTML

<a href="javascript:;" class="scroll-down">
  <button class="scroll-down__btn">
    <label>Scroll</label>
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-down" width="24"
      height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#2c3e50" fill="none" stroke-linecap="round"
      stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" />
      <line x1="12" y1="5" x2="12" y2="19" />
      <line x1="16" y1="15" x2="12" y2="19" />
      <line x1="8" y1="15" x2="12" y2="19" />
    </svg>
  </button>
</a>

CSS

.card.radius {
  border-radius: 0 0 50% 50% / 0 0 25% 25%;
  overflow: hidden;
}
.card.radius .scroll-down .scroll-down__btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #ffc2f0;
  display: inline-block;
  padding: 15px 60px;
  border: none;
  font-family: monospace;
  font-weight: 600;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
.card.radius .scroll-down .scroll-down__btn svg {
  position: absolute;
  top: 5px;
  right: 30px;
  animation: animateBtnArrow 1s infinite linear;
}
@keyframes animateBtnArrow {
  0%, 100% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(10px);
  }
}

Effect 7 & 8

HTML

<a href="javascript:;" class="scroll-down pattern triangle">
  <label>Scroll</label>
  <span><img src="./svg/triangle.svg | circle.svg"></span>
  <span><img src="./svg/triangle.svg"></span>
  <span><img src="./svg/triangle.svg"></span>
</a>

CSS

.scroll-down.pattern {
  height: 100px;
}
.scroll-down.pattern>label {
  display: inline-block;
  margin-bottom: 10px;
}
.scroll-down.pattern span {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: animatePattern 1.5s infinite;
}
.scroll-down.pattern span:nth-child(2) {
  animation-delay: .1s;
}
.scroll-down.pattern span:nth-child(3) {
  animation-delay: .2s;
}
.scroll-down.pattern span:nth-child(4) {
  animation-delay: .3s;
}
@keyframes animatePattern {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: translateY(3px);
  }
  75%, 100% {
    opacity: 0;
    transform: translateY(3px);
  }
}

.scroll-down.pattern.circle span img {
  margin-bottom: 3px;
}

In effect 7 & 8, the markup will be the same. Only the SVG pattern is different. 

I hope, you guys will like the demo. 
Thanks!