feat(ui): Button appearance change

webui/react-ui/src/App.css

@@ -444,7 +444,7 @@ a:hover {
   left: 0;
   width: 100%;
   height: 2px;
-  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--tertiary));
+  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--tertiary), var(--primary));
 }
 
 /* Toast Notification */
@@ -484,78 +484,83 @@ a:hover {
 
 /* Buttons */
 .action-btn {
+  background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
+  color: var(--secondary);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 12px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-weight: 500;
+  font-size: 0.9rem;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  border: none;
-  border-radius: 4px;
-  background: linear-gradient(135deg, var(--primary), rgba(0, 255, 149, 0.7));
-  color: var(--dark-bg);
-  font-weight: 500;
-  cursor: pointer;
+  gap: 8px;
   text-decoration: none;
-  transition: all 0.3s;
+  justify-content: center;
   position: relative;
   overflow: hidden;
-  box-shadow: 0 0 10px rgba(0, 255, 149, 0.4);
-}
-
-.action-btn i {
-  margin-right: 10px;
 }
 
 .action-btn::before {
-  content: '';
+  content: "";
   position: absolute;
-  top: -2px;
-  left: -2px;
-  width: calc(100% + 4px);
-  height: calc(100% + 4px);
-  background: linear-gradient(45deg, var(--primary), var(--secondary), var(--tertiary), var(--primary));
-  z-index: -1;
-  animation: rotate 3s linear infinite;
-  opacity: 0;
-  transition: opacity 0.3s;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: var(--primary);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.4s ease-out;
 }
 
-@keyframes rotate {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+.action-btn i {
+  font-size: 1rem;
 }
 
 .action-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 0 20px rgba(0, 255, 149, 0.6);
+  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3), 0 0 10px rgba(94, 0, 255, 0.5);
+  color: var(--primary);
 }
 
 .action-btn:hover::before {
-  opacity: 1;
+  transform: scaleX(1);
 }
 
-.action-btn:disabled {
-  background: var(--light-bg);
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
+.action-btn:active {
+  transform: translateY(0);
 }
 
-.delete-btn {
-  background: linear-gradient(135deg, var(--danger), rgba(255, 0, 177, 0.7));
-  box-shadow: 0 0 10px rgba(255, 0, 177, 0.4);
+.action-btn.toggle-btn {
+  background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
+  color: var(--secondary);
+  border-left: 3px solid var(--primary);
 }
 
-.delete-btn:hover {
-  box-shadow: 0 0 20px rgba(255, 0, 177, 0.6);
+.action-btn.toggle-btn:hover {
+  box-shadow: 0 0 15px rgba(0, 255, 149, 0.3);
+  color: var(--primary);
 }
 
-.toggle-btn {
-  background: linear-gradient(135deg, var(--tertiary), rgba(94, 0, 255, 0.7));
-  box-shadow: 0 0 10px rgba(94, 0, 255, 0.4);
+.action-btn.toggle-btn::before {
+  background: var(--primary);
 }
 
-.toggle-btn:hover {
-  box-shadow: 0 0 20px rgba(94, 0, 255, 0.6);
+.action-btn.delete-btn {
+  background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
+  color: var(--secondary);
+  border-left: 3px solid var(--danger);
+}
+
+.action-btn.delete-btn:hover {
+  box-shadow: 0 0 15px rgba(255, 0, 177, 0.3);
+  color: var(--danger);
+}
+
+.action-btn.delete-btn::before {
+  background: var(--danger);
 }
 
 /* Cards */