Added subtle scanline to button when selected

src/app/shared/ui/button/button.component.css

@@ -7,6 +7,7 @@
   border-left: none;
   border-right: none;
   overflow: hidden;
+  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
 }
 
 .button-custom::before {
@@ -22,6 +23,7 @@
   z-index: 0;
 }
 
+/* Normal hover/focus state - keep your original behavior */
 .button-custom:hover,
 .button-custom:focus {
   color: var(--color-nier-text-light);
@@ -33,3 +35,115 @@
 .button-custom:focus::before {
   width: 100%;
 }
+
+/* Add NieR-style glitch effects on hover */
+.button-custom::after {
+  content: attr(data-label); /* Use the button's text from data-label attribute */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-nier-text-light);
+  opacity: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.button-custom:hover::after {
+  animation: nier-button-glitch 0.6s ease forwards;
+}
+
+/* Add subtle scan line on hover */
+.button-custom .scan-line {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-nier-text-light);
+  opacity: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.button-custom:hover .scan-line {
+  animation: nier-button-scan 0.3s ease forwards;
+}
+
+/* The glitch effect animation */
+@keyframes nier-button-glitch {
+  0%, 100% {
+    opacity: 0;
+    transform: translateX(0);
+    clip-path: inset(0 0 0 0);
+  }
+  10% {
+    opacity: 0.2;
+    transform: translateX(-2px);
+    clip-path: inset(10% 0 80% 0);
+  }
+  12% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+  20% {
+    opacity: 0.2;
+    transform: translateX(2px);
+    clip-path: inset(30% 0 50% 0);
+  }
+  22% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+  30% {
+    opacity: 0.1;
+    transform: translateX(-1px);
+    clip-path: inset(50% 0 20% 0);
+  }
+  32% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+}
+
+/* The scan line animation */
+@keyframes nier-button-scan {
+  0% {
+    opacity: 0.5;
+    left: -100%;
+  }
+  100% {
+    opacity: 0;
+    left: 100%;
+  }
+}
+
+/* Add a brief effect on button click */
+.button-custom:active {
+  transform: scale(0.98);
+}
+
+.button-custom:active::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.1);
+  opacity: 0;
+  animation: nier-button-flash 0.2s ease;
+}
+
+@keyframes nier-button-flash {
+  0% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0;
+  }
+}

src/app/shared/ui/button/button.component.html

@@ -1,6 +1,8 @@
 <button
   class="w-48 text-left font-noto-jp text-base uppercase transition-all duration-300 rounded-none p-1.5 button-custom"
   (click)="handleClick()"
+  [attr.data-label]="label()"
 >
   <span class="relative z-10">{{ label() }}</span>
+  <span class="scan-line"></span>
 </button>