\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
這些樣式使按鈕在螢?zāi)簧暇又校瑏K使用深色背景顏色來突出發(fā)光效果。 <\/p>\n\n
加入發(fā)光效果
\n外發(fā)光類別在按鈕周圍添加了大型的彩色發(fā)光。這種效果是透過漸層背景、模糊和脈動(dòng)動(dòng)畫來實(shí)現(xiàn)的。 
\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
按鈕樣式
\n接下來，讓我們?cè)O(shè)定按鈕本身的樣式。在這裡，我們添加漸層背景、粗體字體和陰影效果，以提升外觀。 
\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
新增邊框動(dòng)畫
\n按鈕內(nèi)的 .border-animation 範(fàn)圍可建立一個(gè)不斷旋轉(zhuǎn)的彩色邊框。 
\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
懸停效果
\n為了使按鈕具有互動(dòng)性，我們添加了懸停效果，以更改其背景漸層、增加框架陰影並觸發(fā)波紋效果。 
\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
漣漪效應(yīng)
\n當(dāng)按鈕懸停在上方時(shí)，波紋效果會(huì)添加擴(kuò)展的圓形動(dòng)畫，給人一種時(shí)尚、現(xiàn)代的感覺。 
\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
關(guān)鍵影格的動(dòng)畫
\n最後，我們定義發(fā)光邊框旋轉(zhuǎn)和脈動(dòng)背景的關(guān)鍵影格。 
\n<\/p>
\n\n\n  \n  \n