\n\n\n\n

button-container: Holds the button and glow effect.
\npremium-btn: The button itself, which includes an animation span for additional effects.
\nouter-glow: Adds an animated glow around the button for a high-impact visual effect.
\nStep 2: Setting Up CSS Styles
\nBase Styles
\nFirst, we’ll define the styles for the body and button container.
\n<\/p>\n\n

body {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  background-color: #1b1b2f;\n  margin: 0;\n  font-family: Arial, sans-serif;\n  overflow: hidden;\n}\n\n.button-container {\n  position: relative;\n  display: inline-block;\n}\n<\/pre>\n\n\n\n
Diese Stile zentrieren die Schaltfl?che auf dem Bildschirm mit einer dunklen Hintergrundfarbe, um die leuchtenden Effekte hervorzuheben.<\/p>\n\n
Hinzufügen des Glow-Effekts
\nDie Outer-Glow-Klasse fügt einen gro?en, farbenfrohen Glanz um den Knopf herum hinzu. Dieser Effekt wird durch einen Hintergrund mit Farbverlauf, Unsch?rfe und eine pulsierende Animation erreicht.
\n<\/p>\n\n
.outer-glow {\n  position: absolute;\n  top: -25px;\n  left: -25px;\n  right: -25px;\n  bottom: -25px;\n  border-radius: 50px;\n  background: linear-gradient(135deg, #1de9b6, #6a00f4, #ff4081, #1de9b6);\n  background-size: 400% 400%;\n  filter: blur(50px);\n  opacity: 0.8;\n  animation: pulseGlow 6s ease-in-out infinite;\n  pointer-events: none;\n}\n<\/pre>\n\n\n\n
Button-Styling
\nAls n?chstes gestalten wir die Schaltfl?che selbst. Hier fügen wir einen Hintergrund mit Farbverlauf, eine fette Schriftart und einen Schatteneffekt für einen gehobenen Look hinzu.
\n<\/p>\n\n
.premium-btn {\n  padding: 20px 50px;\n  font-size: 22px;\n  font-weight: bold;\n  color: #fff;\n  background: linear-gradient(45deg, #00c6ff, #0072ff);\n  border: none;\n  border-radius: 50px;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  transition: all 0.4s ease;\n  text-transform: uppercase;\n  letter-spacing: 2px;\n  box-shadow: 0px 4px 20px rgba(0, 255, 255, 0.4);\n  z-index: 1;\n}\n<\/pre>\n\n\n\n
Hinzufügen der Randanimation
\nDer .border-animation-Bereich innerhalb der Schaltfl?che erzeugt einen farbenfrohen Rahmen, der sich kontinuierlich dreht.
\n<\/p>\n\n
.border-animation {\n  position: absolute;\n  top: -5px;\n  left: -5px;\n  right: -5px;\n  bottom: -5px;\n  border-radius: 50px;\n  background: linear-gradient(90deg, #1de9b6, #6a00f4, #ff4081, #1de9b6);\n  background-size: 300%;\n  z-index: -1;\n  animation: rotateBorder 4s ease-in-out infinite;\n  filter: blur(8px);\n}\n<\/pre>\n\n\n\n
Hover-Effekte
\nUm die Schaltfl?che interaktiv zu machen, fügen wir Hover-Effekte hinzu, die den Hintergrundverlauf ?ndern, den Boxschatten erh?hen und einen Welleneffekt ausl?sen.
\n<\/p>\n\n
.premium-btn:hover {\n  background: linear-gradient(45deg, #ff4081, #1de9b6);\n  color: #ffffff;\n  box-shadow: 0px 6px 30px rgba(0, 255, 255, 0.6), 0px 6px 30px rgba(255, 64, 129, 0.6);\n  transform: scale(1.05);\n}\n\n.premium-btn::before {\n  content: '';\n  position: absolute;\n  top: -50%;\n  left: -50%;\n  width: 200%;\n  height: 200%;\n  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 70%);\n  transform: rotate(0deg);\n  border-radius: 50%;\n  filter: blur(50px);\n  opacity: 0.9;\n}\n\n.premium-btn:hover::before {\n  transform: rotate(45deg);\n}\n<\/pre>\n\n\n\n
Welleneffekt
\nDer Welleneffekt fügt eine expandierende Kreisanimation hinzu, wenn man mit der Maus über die Schaltfl?che f?hrt, was einen eleganten, modernen Touch verleiht.
\n<\/p>\n\n
.premium-btn::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0;\n  height: 0;\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  transition: width 0.4s ease, height 0.4s ease, opacity 0.5s ease;\n}\n\n.premium-btn:hover::after {\n  width: 350%;\n  height: 350%;\n  opacity: 0;\n}\n<\/pre>\n\n\n\n
Animationen mit Keyframes
\nAbschlie?end definieren wir Keyframes für die leuchtende Randrotation und den pulsierenden Hintergrund.
\n<\/p>
\n\n\n  \n  \n