Stunning hover effects with CSS variables

CSS variables implement cool mouse hover effects

I was recently inspired by the interesting hover animations on Grover. Moving the mouse over the subscribe button shows the color gradient as the cursor moves. The idea is simple, but the result is a button that stands out from the reset and wait to click.

So how can we achieve a similar effect and make our website as good? Good, it’s not as difficult as you think!

Tracking the location

The first thing we need to do is track the mouse cursor position.

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`)}Copy the code
  1. Select the target element and listen for events over which the user mouse moves
  2. Calculates the coordinates of the mouse relative to the element
  3. Save the coordinates to a variable in CSS

Yes, it only takes six lines of code to let your CSS know where the user’s mouse is. With this information you can achieve more and bigger effects. But let’s implement the CSS part first…

Set the animation effect for the gradient

We have stored the mouse coordinates in CSS variables, so we can use them anywhere in the CSS. (SCSS code below)

.button {
  position: relative;
  appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2 em;
  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; }}Copy the code
  1. Wrap the text in aspanTo prevent the gradient layer from overlaying the text
  2. The initialwidth ε’Œ height δΈΊ 0pxAnd increase them to when the mouse hovers over the button400px. Don’t forget SettingstransitionLet it kind of fade in
  3. Use JS to set the coordinates to follow the mouse
  4. Application of aradial-gradient 到 backgroundAnd useclosest-side circle 。 closest-sidemakebackgroundFull of the wholebeforeBut not beyond it.

The effect

That’s it, add the missing HTML:

<button class="button">
	<span>Hover me I'm awesome</span>
</button>
Copy the code

The online preview

See the Pen Mouse movement button with border-radius by Tobias Reich (@electerious) on CodePen.

expand

So many effects can be created by simply reacting to the position of the mouse. It’s gorgeous and makes the πŸ‘Œ interaction so fun.

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

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

– the @ electerious

Or take a fancy and create a 3D parallax button:

3D parallax button with JS controlled CSS variables @CodePen πŸŽ‰ https://t.co/qE0woiNip8 https://t.co/Wyi0xjRzPq

– the @ electerious

The possibilities are endless. You can share the effects you’ve created using it in the comments section below πŸ‘‡.

Q&A

Q: Why use width and height instead of Transform: Scale () for animation?

A: Width and height are bad for animation performance, so you might try to use transform as much as possible. Why don’t you and I do that? The problem is that the browser renders elements in an accelerated layer (in transition). This layer can cause problems when buttons have non-rectangular edges.

Q: Why change top and left instead of transform: Translate ()?

A: Refer to the above article.

Q: Can I follow you on Twitter?

A: Of course. (Original twitter @Electerious)