u

code/base-project/base-vue/test.html

@@ -3,83 +3,80 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>后台按钮渐深点击升级版</title>
+    <title>后台按钮三状态带轻度阴影</title>
     <style>
       body {
         font-family: Arial, sans-serif;
+        background: #f5f6fa;
         padding: 20px;
-        background: #f8f9fa;
       }
+
+      /* 按钮组容器 */
       .btn-group {
-        padding: 16px;
         background: #fff;
+        padding: 16px;
         border-radius: 6px;
-        min-width: 280px;
+        min-width: 300px;
       }
 
       /* 基础按钮 */
       .admin-btn {
-        position: relative;
+        padding: 8px 16px;
-        overflow: hidden;
-        padding: 6px 14px;
-        border: none;
-        border-radius: 4px;
         font-size: 13px;
         font-weight: 500;
-        cursor: pointer;
+        border: none;
+        border-radius: 4px;
         color: #fff;
         margin: 0 6px 6px 0;
+        cursor: pointer;
         outline: none;
-        transition: filter 0.2s ease;
+        transition:
+          background 0.2s ease,
+          box-shadow 0.2s ease;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* 默认轻度阴影 */
       }
 
-      /* 按钮颜色和overlay变量 */
+      /* hover 增强阴影 */
-      .btn-primary {
-        background-color: #2563eb;
-        --overlay-color: rgba(0, 0, 0, 0.22);
-      }
-      .btn-secondary {
-        background-color: #1f2937;
-        --overlay-color: rgba(255, 255, 255, 0.12);
-      }
-      .btn-danger {
-        background-color: #ef4444;
-        --overlay-color: rgba(0, 0, 0, 0.18);
-      }
-
-      /* hover变浅 */
       .admin-btn:hover {
-        filter: brightness(1.1);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
       }
 
-      /* 点击渐深叠加层 */
+      /* 点击时阴影减小，颜色加深，模拟按钮被按下 */
-      .admin-btn::after {
+      .admin-btn:active {
-        content: '';
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 0;
-        height: 100%;
-        background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--overlay-color), rgba(0, 0, 0, 0));
-        pointer-events: none;
       }
 
-      /* 点击触发动画 */
+      /* 主按钮 - 蓝色系 */
-      .admin-btn.active::after {
+      .btn-primary {
-        animation: tideDeep 0.35s ease-out forwards;
+        background-color: #4f83ff;
+      }
+      .btn-primary:hover {
+        background-color: #6a95ff;
+      }
+      .btn-primary:active {
+        background-color: #1e5bcc;
       }
 
-      @keyframes tideDeep {
+      /* 次按钮 - 黑色系 */
-        0% {
+      .btn-secondary {
-          width: 0;
+        background-color: #4a4a4a;
-        }
+      }
-        50% {
+      .btn-secondary:hover {
-          width: 100%;
+        background-color: #6a6a6a;
-        }
+      }
-        100% {
+      .btn-secondary:active {
-          width: 100%;
+        background-color: #222;
-          opacity: 0;
+      }
-        }
+
+      /* 危险按钮 - 红色系 */
+      .btn-danger {
+        background-color: #f03e3e;
+      }
+      .btn-danger:hover {
+        background-color: #f76666;
+      }
+      .btn-danger:active {
+        background-color: #a30000;
       }
     </style>
   </head>
@@ -89,21 +86,5 @@
       <button class="admin-btn btn-secondary">取消</button>
       <button class="admin-btn btn-danger">删除</button>
     </div>
-
-    <script>
-      document.querySelectorAll('.admin-btn').forEach((btn) => {
-        btn.addEventListener('click', () => {
-          if (btn.classList.contains('active')) return
-          btn.classList.add('active')
-          btn.addEventListener(
-            'animationend',
-            () => {
-              btn.classList.remove('active')
-            },
-            { once: true },
-          )
-        })
-      })
-    </script>
   </body>
 </html>