\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
Gaya ini memusatkan butang pada skrin, dengan warna latar belakang gelap untuk membuat kesan bercahaya muncul.<\/p>\n\n
Menambahkan Kesan Cahaya
\nKelas cahaya luar menambah cahaya besar berwarna-warni di sekeliling butang. Kesan ini dicapai dengan latar belakang kecerunan, kabur dan animasi yang berdenyut.
\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
Penggayaan Butang
\nSeterusnya, mari kita gayakan butang itu sendiri. Di sini, kami menambahkan latar belakang kecerunan, fon tebal dan kesan bayang-bayang untuk rupa yang lebih tinggi.
\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
Menambahkan Animasi Sempadan
\nRentang animasi .border di dalam butang mencipta jidar berwarna-warni yang berputar secara berterusan.
\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
Kesan Tuding
\nUntuk menjadikan butang interaktif, kami menambah kesan tuding yang menukar kecerunan latar belakangnya, meningkatkan bayang kotak dan mencetuskan kesan riak.
\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
Kesan Riak
\nKesan riak menambahkan animasi bulatan yang mengembang apabila butang dituding ke atas, memberikan sentuhan moden yang anggun.
\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
Animasi dengan Bingkai Utama
\nAkhir sekali, kami mentakrifkan bingkai utama untuk putaran sempadan yang bercahaya dan latar belakang berdenyut.
\n<\/p>
\n\n\n  \n  \n