u

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

@@ -3,44 +3,113 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>AntD 风格按钮点击反馈</title>
+    <title>按钮示例</title>
+    <!-- 这里使用 Font Awesome CDN，你可以换成自己的图标库 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
     <style>
-      /* 基础按钮样式 */
       .btn {
-        background-color: #1677ff; /* 主色 */
-        color: #fff;
-        border: none;
-        padding: 10px 24px;
-        font-size: 16px;
-        border-radius: 6px;
+        display: inline-flex; /* 内部水平排列 */
+        align-items: center; /* 垂直居中 */
+        justify-content: center; /* 水平居中 */
+        gap: 4px; /* 图标和文字间距 */
+        padding: 8px 16px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        background-color: #f4f5f5;
         cursor: pointer;
-        transition: all 0.15s ease;
-        position: relative;
-        outline: none;
+        font-size: 14px;
+        color: #333;
+        font-family: sans-serif;
       }
 
-      /* hover 高亮 */
-      .btn:hover:not(:disabled) {
-        background-color: #4096ff; /* 调亮 */
+      .btn:hover {
+        background-color: #eaeaea;
       }
 
-      /* 按下 active 效果 */
-      .btn:active:not(:disabled) {
-        background-color: #0958d9; /* 调暗 */
-        transform: translateY(1px); /* 轻微下移，模拟按下 */
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* 按下阴影 */
+      .btn:active {
+        background-color: #dcdcdc;
       }
 
-      /* disabled 状态 */
-      .btn:disabled {
-        background-color: #cfe0ff;
-        color: #a0bfff;
-        cursor: not-allowed;
+      .btn-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px; /* 控制图标大小 */
+      }
+
+      .btn-text {
+        display: inline-block;
       }
     </style>
   </head>
   <body>
-    <button class="btn">Primary Button</button>
-    <button class="btn" disabled>Disabled</button>
+    <!-- 图标在左 -->
+    <button class="btn">
+      <i class="fas fa-check btn-icon"></i>
+      <span class="btn-text">按钮文字</span>
+    </button>
+
+    <!-- 图标在右 -->
+    <button class="btn">
+      <span class="btn-text">按钮文字</span>
+      <i class="fas fa-arrow-right btn-icon"></i>
+    </button>
+  </body>
+</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>按钮示例</title>
+    <!-- 这里使用 Font Awesome CDN，你可以换成自己的图标库 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    <style>
+      .btn {
+        display: inline-flex; /* 内部水平排列 */
+        align-items: center; /* 垂直居中 */
+        justify-content: center; /* 水平居中 */
+        gap: 4px; /* 图标和文字间距 */
+        padding: 8px 16px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        background-color: #f4f5f5;
+        cursor: pointer;
+        font-size: 14px;
+        color: #333;
+      }
+
+      .btn:hover {
+        background-color: #eaeaea;
+      }
+
+      .btn:active {
+        background-color: #dcdcdc;
+      }
+
+      .btn-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px; /* 控制图标大小 */
+      }
+
+      .btn-text {
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- 图标在左 -->
+    <button class="btn">
+      <i class="fas fa-check btn-icon"></i>
+      <span class="btn-text">按钮文字</span>
+    </button>
+
+    <!-- 图标在右 -->
+    <button class="btn">
+      <span class="btn-text">按钮文字</span>
+      <i class="fas fa-arrow-right btn-icon"></i>
+    </button>
   </body>
 </html>