Published on | Prototyping: From UX to Front End — Medium Tobias Reich

I recently got inspired by the playful hover animation on the Grover website. Moving your mouse over the subscribe-button reveals a colorful gradient that follows your cursor as it moves. The idea is simple, but the result is a button that stands out from the reset and waits to be clicked.

How can we achieve a similar effect to make our website stand out, too? Well, it’s not as hard as you might think!

Track the position

The first thing we need is the position of the mouse.

document.querySelector('.button').onmousemove = (e) => {

  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)

}

Select the element and wait till the user moves his mouse across it
Calculate the position relative to the element
Save the coordinates in CSS variables

Yes, only 9 lines of code to let your CSS know where the user positions his mouse. The amount of effects you can achieve with this information is enormous. But let us finish the CSS first…

Animate the gradient

We now have the coordinates stored in CSS variables and we can use them everywhere in our CSS.

.button {
  position: relative;
  appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;

  span {
    position: relative;
  }

  &::before {
    --size: 0;

    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
  }

  &:hover::before {
    --size: 400px;
  }
}

Wrap the text inside a span to avoid that the gradient appears above it
Start with a width and height of 0px and bring it up to 400px when the user hovers the button. And don’t forget to set a transition to make it appear with a swoosh 💨
Use the coordinates to follow the mouse
Apply a radial-gradient to the background and use a closest-side circle. Closest-side fills the whole before without getting beyond it.

The result

That’s it! Add the missing HTML and enjoy your button:

<a href="https://medium.com/media/c3769e6eac7475b602678750928ff4a7/href">https://medium.com/media/c3769e6eac7475b602678750928ff4a7/href</a>

Enormous possibilities

You can build so many effects just by reacting to the position of the mouse. It’s gorgeous and makes so much fun to play with 👌

Here’s a similar animation I’ve used on the website of basicScroll:

May the hover be with you https://t.co/2jrmVorLRW

— @electerious

Or go fancy and build a 3D parallax button:

3D parallax button with JS controlled CSS variables @CodePen 🎉 https://t.co/qE0woiNip8 https://t.co/Wyi0xjRzPq

— @electerious

The possibilities are endless. Let us know what you did with it in the comments below 👇

Questions and answers

Why animating width and height instead of using transform: scale()?

The performance when animating width and height is bad and you should always try to use transform where possible. So why am I not doing it like I should? The problem is that browsers are rendering elements (that are transforming) in an accelerated layer. This layer can cause problems when the button has non-rectangular edges.

Issue with accelerated layers and border-radius

Why changing top and left instead of using transform: translate()?

See explanation above 👆

Can I follow you on Twitter?

Sure.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Stunning hover effects with CSS variables was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Stunning hover effects with CSS variables

Cool stuff, every week

More Articles