Animated Glowing Button

WP Tools

Elementor Free Plugin (Required)
Elementor Pro Plugin
Kadence Theme

1. CSS Classes

				
					galactic-button
				
			

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

Setup Guideline Video