Use CSS variables to achieve cool and amazing floating effects

Recently, I found a fun hover animation from the Grover website and got some inspiration of my own. This animation is that when you move the mouse over the subscription button, the corresponding color gradient will be displayed. This idea is simple, but it makes the button stand out, people notice it immediately, and increase the probability of clicking it.

How can we achieve this effect and make our website stand out? In fact, it is not as difficult as you think!

Tracking location

The first thing we need to do is get 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`)

}

1. Select the element and wait until the user moves the mouse over it;
2. Calculate the position relative to the element;
3. Store the coordinates in CSS variables.

Yes, with just 9 lines of code you can get information about where the user has placed their mouse cursor. You can use this information to achieve amazing results, but let’s finish the CSS code first.

Animated gradient

We start by storing the coordinates in CSS variables so that we can use them at any time.

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

1. Wrap the text in a span to avoid it appearing above the button.
2. Initialize width and height to 0px, and when the user hovers over the button, change it to 400px. Don't forget to set this transition so that it appears instantly like the wind :dash:;
3. Track the mouse position using coordinates;
4. Apply a radial-gradient to the background property, using the closest-side circle. Closest-side can cover the entire surface.

Summarize

The above is what I introduced to you about using CSS variables to achieve cool and amazing floating effects. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!