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 the content of a webpage. 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 an icon that looks like the following:

First thing we’ll need to do is create the required HTML markup:

<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 animated square that provides a visual representation to the user that the page can be scrolled :

.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 element. This 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 basic CSS. This icon can easily be modified to match any color palette and the size increased or decreased as required. Thanks for reading!