scroll down button effect only css

See the Pen scroll button effect only css by publisher.kim (@publisherkim) on CodePen.

html

<div class="scrolldown">
  <div class="text">SCROLL</div>
  <div class="deco"></div>
</div>

 

css

@keyframes deco {
  0% {transform: translateY(-56px);}
  25% {transform: translateY(0);}
  100% {transform: translateY(0);}
}
@keyframes big {
  0% {transform: scale(1);opacity: 1;}
  25% {transform: scale(1);opacity: 1;}
  50% {transform: scale(2);opacity: 0;}
  50.01% {transform: scale(1);opacity: 1;}
  75% {transform: scale(2);opacity: 0;}
  75.01% {transform: scale(1);opacity: 1;}
  100% {transform: scale(2);opacity: 0;}
}

.scrolldown {position: absolute; bottom: 20px; left: calc(50% - 31px); width: 62px; padding-bottom: 91px;}
.scrolldown:before {content: ''; display: block; position: absolute; bottom: 12px; left: 50%; width: 1px; height: 60px; background-image: linear-gradient(to bottom, #858e97 0%,#11a0db 100%); opacity: 0.35; }

.scrolldown .text {line-height: 16px; text-align: center; color: #6a747f; font-size: 11px; font-weight: 400; letter-spacing: 0.3em;}
.scrolldown .deco {position: absolute; bottom: 0; left: calc(50% - 15px); width: 30px; height: 30px; animation: deco 4s ease infinite;}
.scrolldown .deco:before {content: '';  display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(17, 160, 219, 0.2); border-radius: 100%; animation: big 4s ease infinite;}
.scrolldown .deco:after {content: ''; display: block; position: absolute; top: calc(50% - 4px); left: calc(50% - 3px); z-index: 2; width: 7px; height: 7px; background-color: #11a0db; border-radius: 7px; }