1 
2<button class="neon-button">Activate</button>          

 1 
 2.neon-button {
 3  position: relative;
 4  padding: 16px 36px;
 5  font-size: 20px;
 6  font-weight: 700;
 7  color: #fff;
 8  background: transparent;
 9  border: 2px solid #0ff;
10  border-radius: 8px;
11  cursor: pointer;
12  overflow: hidden;
13  outline: none;
14  transition: all 0.4s ease;
15  z-index: 1;
16  text-transform: uppercase;
17  letter-spacing: 1.5px;
18}
19 
20/* Efek glow saat hover */
21.neon-button:hover {
22  box-shadow:
23    0 0 10px #0ff,
24    0 0 20px #0ff,
25    0 0 40px #0ff,
26    0 0 80px #0ff;
27  transform: scale(1.05);
28}
29 
30/* Animasi border mengalir (pseudo-element) */
31.neon-button::before {
32  content: '';
33  position: absolute;
34  top: 0;
35  left: -100%;
36  width: 100%;
37  height: 100%;
38  background: linear-gradient(
39    90deg,
40    transparent,
41    rgba(0, 255, 255, 0.4),
42    transparent
43  );
44  transition: left 0.8s ease;
45  z-index: -1;
46}
47 
48.neon-button:hover::before {
49  left: 100%;
50}
51 
52/* Feedback klik (opsional) */
53.click-pulse {
54  position: absolute;
55  top: 0;
56  left: 0;
57  width: 100%;
58  height: 100%;
59  background: rgba(0, 255, 255, 0.2);
60  opacity: 0;
61  animation: pulse 0.5s ease-out;
62  pointer-events: none;
63  border-radius: 8px;
64}
65 
66@keyframes pulse {
67  0% { opacity: 0.6; transform: scale(0.95); }
68  100% { opacity: 0; transform: scale(1.2); }
69}          

1 
2const button = document.querySelector('.neon-button');
3button.addEventListener('click', function(e) {
4  const pulse = document.createElement('div');
5  pulse.classList.add('click-pulse');
6  this.appendChild(pulse);
7  setTimeout(() => pulse.remove(), 500);
8});