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?
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
- Drag and Drop the Button Widget: In Elementor, drag the Button widget into your desired section.
- Access Advanced Settings: Click on the button to open its settings panel. Navigate to the Advanced tab.
- 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
andheight
- Default:
200px
- Tip: To make the glow larger, increase both the
width
andheight
values equally. For example, changewidth: 200px;
andheight: 200px;
towidth: 300px;
andheight: 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 asbackground: 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, changeanimation: swirl 3s infinite linear;
toanimation: 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);
tofilter: 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;
toopacity: 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.