\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
這些樣式使按鈕在屏幕上居中，并使用深色背景顏色來(lái)突出發(fā)光效果。<\/p>\n\n
添加發(fā)光效果
\n外發(fā)光類在按鈕周?chē)砑恿舜笮偷牟噬l(fā)光。這種效果是通過(guò)漸變背景、模糊和脈動(dòng)動(dòng)畫(huà)來(lái)實(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接下來(lái)，讓我們?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)畫(huà)
\n按鈕內(nèi)的 .border-animation 范圍創(chuàng)建一個(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為了使按鈕具有交互性，我們添加了懸停效果，以更改其背景漸變、增加框陰影并觸發(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)畫(huà)，給人一種時(shí)尚、現(xiàn)代的感覺(jué)。
\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)畫(huà)
\n最后，我們定義發(fā)光邊框旋轉(zhuǎn)和脈動(dòng)背景的關(guān)鍵幀。
\n<\/p>
\n\n\n  \n  \n