Create Eye-Catching Button Effect with Rotating Glow Animation

Ever wondered how websites create those eye-catching buttons with glowing, rotating effects? These effects can captivate users and elevate your website's UI/UX. Let’s explore how to build them step-by-step with CSS and a bit of JavaScript.

Step 1: Create the Button Layout

Let’s make a simple button at first-

<button>WHY CHOOSE US</button>

button {

  width: 250px;

  height: 80px;

  border-radius: 3rem;

  outline: none;

  background: black;

  border: 2px solid transparent;

  color: white;

  cursor: pointer;

}



/* ... Other styles ... */

It will look like this-

Now, we will use this conic gradient as our gradient border of the button. How can we do that?

We will use the power of box-sizing here. We will make multiple backgrounds for this button. The top background of the button will be a solid background which will have padding-box as box-sizing which means that it won’t stretch till the border. See the code below-

  background: linear-gradient(black, black) padding-box,

    conic-gradient(from 0, transparent, white 10%, transparent 20%) border-box;

So, now we have a black background that covers the button, including its content and padding. The conic-gradient we added earlier stretches all the way to the border. Since the border is transparent, we can see the conic gradient's 2px thickness showing through the border. Now, the button looks like this-

LinkedIn