Design an animated mouse scroll icon with CSS

In this tutorial we’ll be creating a simple animated mouse scroll icon. These types of icons are used to provided a visual indication to users that they can scroll to keep exploring a page. Whether or not they’re necessary is up for debate but either way this is a fun little project to learn about design using pure CSS.

Once completed you should end up with san icon that looks like the following

First thing you’ll need to do is add the following markup to your HTML:

<div class="icon-scroll"></div>Code language: HTML, XML (xml)

Next comes the CSS, starting with the style to create the basic shape of the mouse.

.icon-scroll {
  width: 20px;
  height: 30px;
  background: #ccc;
  border: 2px solid #bbb;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  margin: auto;
  position: relative;
  box-shadow: 3px 3px 5px -5px #000;
}Code language: CSS (css)

Using the CSS ::before selector we can create a pseudo-element to represent the scroll wheel:

.icon-scroll::before {
  content: "";
  width: 4px;
  height: 10px;
  background: #eee;
  border-radius: 2px;
  margin-top: 5px;
}Code language: CSS (css)

And using the CSS ::after selector we can add a small square for the animation:

.icon-scroll::after {
  content: "";
  width: 4px;
  height: 3px;
  background-color: #bbb;
  position: absolute;
  display: block;
  animation: scroll ease 1s infinite;
}Code language: CSS (css)

Finally we’ll add the keyframe animation that shifts and fades the .icon-scroll::after. The animation will last for 1 second and repeat itself in an infinite loop:

@keyframes scroll {
  from {
    top: 5px;
  }
  to {
    top: 18px;
  }
  100% {
    opacity: 0;
  }
}Code language: CSS (css)

There you have it, a simple mouse scroll icon built from a single <div> element and some CSS. This icon can easily be modified to match any color palette and the size increased/decreased as required. Thanks for reading!