\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
これらのスタイルはボタンを畫(huà)面の中央に配置し、暗い背景色で光る効果を際立たせます。<\/p>\n\n
グロー効果を追加する
\n外側(cè)の光るクラスは、ボタンの周囲に大きくてカラフルな光を追加します。この効果は、グラデーションの背景、ぼかし、脈動(dòng)するアニメーションによって実現(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次に、ボタン自體のスタイルを設(shè)定しましょう。ここでは、グラデーションの背景、太字のフォント、影効果を追加して、高級(jí)感のある外観を?qū)g現(xiàn)します。
\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
枠線アニメーションの追加
\nボタン內(nèi)の .border-animation スパンは、連続的に回転するカラフルな境界線を作成します。
\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ボタンをインタラクティブにするために、背景のグラデーションを変更し、ボックスの影を増やし、波紋効果をトリガーするホバー効果を追加します。
\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
波及効果
\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
キーフレームを使用したアニメーション
\n最後に、光る境界線の回転と脈動(dòng)する背景のキーフレームを定義します。
\n<\/p>
\n\n\n  \n  \n