Lytbox Academy Main Logo Light Version
Pro MembershipsBlogContact
Join the AcademySign In
Elementor Tuts

Create Animated Glowing Rainbow Buttons In Elementor

Jeffrey at Lytbox
Table of Contents

Glowing, swirling effects to your Elementor buttons can be cool and creative.

Adding a glowing, swirling effect to your Elementor buttons can make them stand out and attract more attention. And when done right, they can lead to more clicks. Why only use the same boring buttons?

Promotional graphic for Oura Ring sale with floating shapes

We’re going to use Elementor as an example for this tutorial but the same can be applied to Bricks and Breakdance (the other builders I use.)

Follow these steps to achieve this effect.

Step 1: Add a Class to Your Button

  1. Drag and Drop the Button Widget: In Elementor, drag the Button widget into your desired section.
  2. Access Advanced Settings: Click on the button to open its settings panel. Navigate to the Advanced tab.
  3. Assign a CSS Class: In the CSS Classes field, enter galactic-button. This class will be used to apply the custom CSS.

Step 2: Add Custom CSS to Your Site

Navigate to Custom CSS: Go to Elementor Site Settings → Custom CSS. If you have another CSS management space, add the CSS snippet there. In my video tutorial I add the CSS at first in the customizer to see the changes live while I edit the CSS. After, I’ll move the CSS to my preferred code plugin, WP Codebox.

Insert the Following CSS Code:

/* keeps the button on top of the glow */
.galactic-button {
  z-index: 1;
}

/* css for the glowing effect */
.galactic-button:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	border-radius: 50%;
	pointer-events: none;
	/* adjust the width and height keeping them both the same size */
  width: 200px;
  height: 200px;
	/* adjust the colors here */
  background: conic-gradient(from 0deg, #ff007f, #ffbf00, #00ffbf, #00d4ff, #ff007f);
	/* adjust the speed of the animation */
  animation: swirl 3s infinite linear;
	/* adjust the blur */
  filter: blur(50px);
	/* adjust the opacity */
  opacity: 0.5;
}


/* Swirl Animation */
@keyframes swirl {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

Step 3: Customize the Glowing Swirl Effect

The provided CSS is fully customizable. Notice the note in between the /* comments */, these are comments there to help guide you and what and where to make your adjustments. If you are new to CSS then I highly suggest you watch the video tutorial below to edit correctly.

Here’s how you can tweak it to match your design preferences:

Size of the Glow:

  • Properties: width and height
  • Default: 200px
  • Tip: To make the glow larger, increase both the width and height values equally. For example, change width: 200px; and height: 200px; to width: 300px; and height: 300px;. Ensure both values are the same to maintain a circular shape.

    Colors:

    • Property: background
    • Default: conic-gradient(from 0deg, #ff007f, #ffbf00, #00ffbf, #00d4ff, #ff007f)
    • Tip: To change the colors of the swirl, replace the hex color codes in the conic-gradient. For instance, to use shades of blue, you might set it as background: conic-gradient(from 0deg, #0000ff, #00ffff, #0000ff);. You can find hex color codes using a color picker tool or a free code editor like Visual Studio Code.

    Animation Speed:

    • Property: animation
    • Default: 3s
    • Tip: To adjust the speed of the swirl, change the duration value in the animation property. For a slower rotation, increase the time; for example, change animation: swirl 3s infinite linear; to animation: swirl 5s infinite linear;. For a faster rotation, decrease the time; for example, animation: swirl 2s infinite linear;.

    Blur Intensity:

    • Property: filter: blur()
    • Default: 50px
    • Tip: To make the glow more diffused, increase the blur value. For example, change filter: blur(50px); to filter: blur(70px);. To make it sharper, decrease the blur value; for example, filter:

    Opacity Level:

    • Property: opacity
    • Default: 0.5
    • Tip: To make the glow more transparent, decrease the opacity value. For example, change opacity: 0.5; to opacity: 0.3;. To make it more opaque, increase the value; for example, opacity: 0.7;.

    Video Tutorial

    If you’re new to CSS or it’s not working correctly for you, or… you just want to geek out and watch someone do this making it all easier, then watch my video below.

    Join the Lytbox Newsletter

    Small Subscription Form