优化按钮样式：1. 修改悬停状态背景色和阴影效果；2. 添加激活状态样式，确保按钮在不同状态下的视觉反馈；3. 改进活动状态下的悬停和点击效果。

Author: iwangbowen

src/components/styles/buttons.scss

@@ -207,11 +207,30 @@
   }
 
   &:hover {
-    background-color: var(--el-color-primary-light-8);
+    background-color: var(--el-color-info-light-8);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   }
 
   &:active {
-    background-color: var(--el-color-primary-light-5);
+    transform: translateY(0);
+    box-shadow: none;
+  }
+
+  &.active {
+    background-color: var(--el-color-primary);
+    color: white;
+    box-shadow: 0 2px 6px var(--el-color-primary-light-5);
+
+    &:hover {
+      background-color: var(--el-color-primary-light-3);
+      box-shadow: 0 2px 8px var(--el-color-primary-light-4);
+    }
+
+    &:active {
+      background-color: var(--el-color-primary-dark-2);
+      box-shadow: 0 1px 4px var(--el-color-primary-light-5);
+    }
   }
 }
 
@@ -237,11 +256,29 @@
   }
 
   &:hover {
-    background-color: var(--el-fill-color-light);
-    color: var(--el-color-primary);
+    background-color: var(--el-color-info-light-8);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   }
 
   &:active {
-    background-color: var(--el-color-primary-light-8);
+    transform: translateY(0);
+    box-shadow: none;
+  }
+
+  &.active {
+    background-color: var(--el-color-primary);
+    color: white;
+    box-shadow: 0 2px 6px var(--el-color-primary-light-5);
+
+    &:hover {
+      background-color: var(--el-color-primary-light-3);
+      box-shadow: 0 2px 8px var(--el-color-primary-light-4);
+    }
+
+    &:active {
+      background-color: var(--el-color-primary-dark-2);
+      box-shadow: 0 1px 4px var(--el-color-primary-light-5);
+    }
   }
 }