How to create stunning gradient buttons with mouse cursor tracking

3 min readDec 26, 2020

In this article, I’ll show you how to create buttons with a unique hover effect where the gradient follows the mouse cursor. Let’s jump into it!

The Setup

The first step is always the hardest. Not in this case. We just need a few lines of code to create our foundation.

HTML

First of all, we need a button. I know this is quite surprising. Thank me later. Make sure to use an id attribute with the button element. Otherwise, you won’t be able to change the gradient dynamically in it’s hover state.

<button id="btn">Click here</button>

CSS

After this, we have to do some basic CSS. First of all, we use a :root selector to define a fallback for the center of our gradient. This will have an impact on the initial state of the button. In this example, I’ve used 0% for x but you can use every value between 0% and 100%.

:root {
  --x: 0%;
}

Let's give the button some styles. Feel free to use your own properties here. The important part is the gradient, which is used for the background of the button. Make sure to use the same CSS variable, which is used in your :root selector. Otherwise, the fallback won’t work.

button {
  height: 50px;
  min-height: 50px;
  min-width: 300px;
  border: none;
  position: relative;
  color: white;
  font-size: 14px;  background: linear-gradient(
    90deg,
    rgba(7, 22, 103, 1) 0%,
    rgba(55, 83, 198, 1) var(--x),
    rgba(7, 22, 103, 1) 100%
  );
}

One point I should mention is that it can be useful to define the focus state of the button. If not, the browser’s default styles could create some problems.

button:focus {
  outline: none;
}

Adding some function

And here's the crux of the matter. Till this point, we only have a linear gradient with three points. To dynamically change the center of the gradient, we have to use a few lines of JS.

Remember: Our goal is to align the center point in relation to the position of the cursor on hover.

Java Script

First things first. We declare a variable for our button by using the element's id.

let btn = document.getElementById("btn");

On mouse move, we want to calculate the position of the cursor in relation to the dimensions of the button and change the value of x. It’s important to restart the function onmousemove instead of onmouseover. Otherwise, the gradient’s center will stick to the first position, where the cursor enters the button.

In the next step, we declare rect as the button’s size and relative position in relation to the viewport.

The clientX property provides the horizontal coordinate within the viewport. By subtracting the horizontal coordinate by the left position of the buttons border-box, we will receive our desired position of the gradient’s center.

Now the only thing left is to change the variable of x to our calculated center and adding px as its unit.

btn.onmousemove = function (e) {
  let rect = e.target.getBoundingClientRect();let x = e.clientX - rect.left;
  btn.style.setProperty("--x", x + "px");
};

Feel free to have a look at my CodePen

Thanks for reading! My name is Yannik, I’m a multidisciplinary designer from Cologne, Germany. Follow me on Instagram or visit my Website if you want to keep in touch. Cheers!

CCO @ Minotaurus Agency