Add an Animated Scroll Down Icon/Button in Elementor

 

 

Code snippet for Scroll Down Animation:

selector .elementor-button-text {
    position: relative;
    top: 3px;
    width: 3px;
    min-height: 8px;
    display: block;
    background: currentColor;
    border-radius: 5px;
    -webkit-animation: 1.2s ease infinite wheel-up-down;
    animation: 1.2s ease infinite wheel-up-down;
}
selector .elementor-button-icon{
    display: none;
}
selector a:focus{
    outline: none;
}

@-webkit-keyframes wheel-up-down {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(18px);
            transform: translateY(18px);
    opacity: 0;
  }
}

@keyframes wheel-up-down {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(18px);
            transform: translateY(18px);
    opacity: 0;
  }
}

 

Leave a Comment

Your email address will not be published. Required fields are marked *