Design an animated scrolling mouse icon with CSS

Scrolling indicators are a common client request.

Whether or not they’re entirely necessary is a matter for another day…

In this article we’ll create a simple mouse icon with an animation effect to indicate a scrolling action, like this:

First thing to do is add the following HTML to your page.

<div class="icon-scroll"></div>

Next we’ll add 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;
}

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;
}

And using the CSS ::after selector we can add a small square that we’ll animate.

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

Lastly the animation that shifts and fades .icon-scroll::after in an infinite loop.

@keyframes scroll {
  from {
    top: 5px;
  }
  to {
    top: 18px;
  }
  100% {
    opacity: 0;
  }
}