diff --git a/example/docs/zh-CN/components/button.md b/example/docs/zh-CN/components/button.md
index 279f6f05..1a60bf0d 100644
--- a/example/docs/zh-CN/components/button.md
+++ b/example/docs/zh-CN/components/button.md
@@ -288,13 +288,6 @@ export default {
 
 :::
 
-::: title Button 变量
-:::
-
-```
-
-```
-
 ::: title Button 属性
 :::
 
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index d0f00914..69d834fd 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -16,7 +16,7 @@
       <li> 
         <h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3> 
         <ul>
-          <li>[新增] button 组件 prefix-icon 属性。
+          <li>[新增] button 组件 prefix-icon 属性。</li>
           <li>[新增] button 组件 suffix-icon 属性。</li>
           <li>[新增] table 组件 row 和 row-double 时间的 event 参数。</li>
           <li>[新增] table 组件 contextmenu 行右键事件。</li>
diff --git a/src/component/button/index.less b/src/component/button/index.less
index 7b1800c5..ac67696d 100644
--- a/src/component/button/index.less
+++ b/src/component/button/index.less
@@ -1,19 +1,27 @@
 @import "../../theme/variable.less";
 
 @button-primary-color: var(--button-primary-color);
+@button-primary-border-color: var(--button-primary-border-color);
+@button-normal-color: var(--button-normal-color);
+@button-normal-border-color: var(--button-normal-border-color);
+@button-warm-color: var(--button-warm-color);
+@button-warm-border-color: var(--button-warm-border-color);
+@button-danger-color: var(--button-danger-color);
+@button-danger-border-color: var(--button-danger-border-color);
 @button-border-radius: var(--button-border-radius);
 @button-border-color: var(--button-border-color);
-@button-normal-color: var(--button-normal-color);
-@button-warm-color: var(--button-warm-color);
-@button-danger-color: var(--button-danger-color);
 
 :root {
   --button-primary-color: @global-primary-color;
+  --button-primary-border-color: @global-primary-color;
+  --button-normal-color: @global-normal-color;
+  --button-normal-border-color: @global-normal-color;
+  --button-warm-color: @global-warm-color;
+  --button-warm-border-color: @global-warm-color;
+  --button-danger-color: @global-danger-color;
+  --button-danger-border-color: @global-danger-color;
   --button-border-radius: @global-border-radius;
   --button-border-color: @global-neutral-color-6;
-  --button-normal-color: @global-normal-color;
-  --button-warm-color: @global-warm-color;
-  --button-danger-color: @global-danger-color;
 }
 
 .layui-btn {
@@ -54,25 +62,25 @@
 .layui-btn-primary {
   color: #fff;
   background-color: @button-primary-color;
-  border-color: @button-primary-color;
+  border-color: @button-primary-border-color;
 }
 
 .layui-btn-normal {
   color: #fff;
   background-color: @button-normal-color;
-  border-color: @button-normal-color;
+  border-color: @button-normal-border-color;
 }
 
 .layui-btn-warm {
   color: #fff;
   background-color: @button-warm-color;
-  border-color: @button-warm-color;
+  border-color: @button-warm-border-color;
 }
 
 .layui-btn-danger {
   color: #fff;
   background-color: @button-danger-color;
-  border-color: @button-danger-color;
+  border-color: @button-danger-border-color;
 }
 
 .layui-btn-primary:hover,
diff --git a/src/component/button/index.vue b/src/component/button/index.vue
index 4cd77677..67397a66 100644
--- a/src/component/button/index.vue
+++ b/src/component/button/index.vue
@@ -7,12 +7,7 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import { computed } from "vue";
-import {
-  ButtonBorder,
-  ButtonNativeType,
-  ButtonSize,
-  ButtonType,
-} from "./interface";
+import { ButtonBorder, ButtonNativeType, ButtonSize, ButtonType} from "./interface";
 import { BooleanOrString, String } from "src/types";
 
 export interface LayButtonProps {
@@ -68,13 +63,7 @@ const classes = computed(() => {
     <i v-if="prefixIcon" :class="`layui-icon ${prefixIcon}`"></i>
     <i
       v-if="loading"
-      class="
-        layui-icon
-        layui-icon-loading-one
-        layui-anim
-        layui-anim-rotate
-        layui-anim-loop
-      "
+      class="layui-icon layui-icon-loading-one layui-anim layui-anim-rotate layui-anim-loop"
     ></i>
     <slot v-else></slot>
     <i v-if="suffixIcon" :class="`layui-icon ${suffixIcon}`"></i>