修改按钮原生方法，增加参数，补充特殊颜色变量，覆盖按钮样式

element-variables.scss

@@ -17,6 +17,18 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
 -------------------------- */
 /// color|1|Brand Color|0
 $--color-primary: #0994DC !default;
+$--color-primary-hover: #0885C6 !default;
+$--color-primary-background-plain: #FFFFFF !default;
+$--color-primary-border-plain: #0994DC !default;
+$--color-primary-text-plain: #0994DC !default;
+$--color-primary-background-plain-hover: #EDF6FC !default;
+$--color-primary-border-plain-hover: #0885C6 !default;
+$--color-primary-text-plain-hover: #0885C6 !default;
+
+$--color-default-hover: #EDF6FC !default;
+$--color-default-border-plain: #E4E4E4 !default;
+$--color-default-text-plain: #999999 !default;
+
 /// color|1|Background Color|4
 $--color-white: #FFFFFF !default;
 /// color|1|Background Color|4
@@ -32,12 +44,51 @@ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /
 $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
 /// color|1|Functional Color|1
 $--color-success: #4EC87C !default;
+$--color-success-hover: #43BF73 !default;
+$--color-success-background-plain: #EBF8F2 !default;
+$--color-success-border-plain: #CFEFDF !default;
+$--color-success-text-plain: #4EC87C !default;
+$--color-success-background-plain-hover: #E1F2EA !default;
+$--color-success-border-plain-hover: #43C072 !default;
+$--color-success-text-plain-hover: #43BF73 !default;
 /// color|1|Functional Color|1
 $--color-warning: #FFA533 !default;
+$--color-warning-hover: #F29924 !default;
+$--color-warning-background-plain: #FFF5E6 !default;
+$--color-warning-border-plain: #F8DDC0 !default;
+$--color-warning-text-plain: #FFA533 !default;
+$--color-warning-background-plain-hover: #FAEDD9 !default;
+$--color-warning-border-plain-hover: #F0D2B2 !default;
+$--color-warning-text-plain-hover: #F29924 !default;
 /// color|1|Functional Color|1
 $--color-danger: #FF3D33 !default;
+$--color-danger-hover: #F22F24 !default;
+$--color-danger-background-plain: #FCEEED !default;
+$--color-danger-border-plain: #FCDDDC !default;
+$--color-danger-text-plain: #FF3D33 !default;
+$--color-danger-background-plain-hover: #FAE7E6 !default;
+$--color-danger-border-plain-hover: #F5CDCB !default;
+$--color-danger-text-plain-hover: #F22F24 !default;
+
+/// color|1|Functional Color|1
+$--color-hint: #FFBF00 !default;
+$--color-hint-hover: #F2B600 !default;
+$--color-hint-background-plain: #FFF9E1 !default;
+$--color-hint-border-plain: #FFE3BE !default;
+$--color-hint-text-plain: #FFBF00 !default;
+$--color-hint-background-plain-hover: #FAE7E6 !default;
+$--color-hint-border-plain-hover: #F5CDCB !default;
+$--color-hint-text-plain-hover: #EBB102 !default;
+
 /// color|1|Functional Color|1
-$--color-info: #FFBF00 !default;
+$--color-info: #00BBF2 !default;
+$--color-info-hover: #00B0E5 !default;
+$--color-info-background-plain: #EAF4FF !default;
+$--color-info-border-plain: #D5E8FC !default;
+$--color-info-text-plain: #666666 !default;
+$--color-info-background-plain-hover: #BED7F2 !default;
+$--color-info-border-plain-hover: #E0EDFB !default;
+$--color-info-text-plain-hover: #605E5E !default;
 
 $--color-success-light: mix($--color-white, $--color-success, 80%) !default;
 $--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
@@ -49,25 +100,28 @@ $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
 $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
 $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
 /// color|1|Font Color|2
-$--color-text-primary: #303133 !default;
+$--color-text-primary: #333333 !default;
 /// color|1|Font Color|2
-$--color-text-regular: #606266 !default;
+$--color-text-regular: #666666 !default;
 /// color|1|Font Color|2
-$--color-text-secondary: #909399 !default;
+$--color-text-secondary: #999999 !default;
 /// color|1|Font Color|2
 $--color-text-placeholder: #CCCCCC !default;
 /// color|1|Border Color|3
-$--border-color-base: #DCDFE6 !default;
+$--border-color-base: #E4E4E4 !default;
 /// color|1|Border Color|3
-$--border-color-light: #E4E7ED !default;
+$--border-color-light: #E0E0E0 !default;
 /// color|1|Border Color|3
-$--border-color-lighter: #EBEEF5 !default;
+$--border-color-lighter: #EBEBEB !default;
 /// color|1|Border Color|3
 $--border-color-extra-light: #F2F6FC !default;
 
 // Background
 /// color|1|Background Color|4
-$--background-color-base: #F5F7FA !default;
+$--background-color-base: #F6F6F6 !default;
+$--background-color-light: #F5F6F7 !default;
+$--background-color-lighter: #F8F8F8 !default;
+
 
 /* Link
 -------------------------- */
@@ -81,9 +135,9 @@ $--border-style-base: solid !default;
 $--border-color-hover: $--color-text-placeholder !default;
 $--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
 /// borderRadius|1|Radius|0
-$--border-radius-base: 4px !default;
+$--border-radius-base: 3px !default;
 /// borderRadius|1|Radius|0
-$--border-radius-small: 2px !default;
+$--border-radius-small: 3px !default;
 /// borderRadius|1|Radius|0
 $--border-radius-circle: 100% !default;
 /// borderRadius|1|Radius|0
@@ -517,46 +571,65 @@ $--button-border-radius: $--border-radius-base !default;
 /// padding||Spacing|3
 $--button-padding-vertical: 10px !default;
 /// padding||Spacing|3
-$--button-padding-horizontal: 18px !default;
+$--button-padding-horizontal: 16px !default;
 
 /// fontSize||Font|1
 $--button-medium-font-size: $--font-size-base !default;
 /// borderRadius||Border|2
 $--button-medium-border-radius: $--border-radius-base !default;
 /// padding||Spacing|3
-$--button-medium-padding-vertical: 8px !default;
+$--button-medium-padding-vertical: 9px !default;
 /// padding||Spacing|3
-$--button-medium-padding-horizontal: 18px !default;
+$--button-medium-padding-horizontal: 16px !default;
 
 /// fontSize||Font|1
 $--button-small-font-size: 12px !default;
-$--button-small-border-radius: #{$--border-radius-base - 1} !default;
+$--button-small-border-radius: $--border-radius-base !default;
 /// padding||Spacing|3
 $--button-small-padding-vertical: 7px !default;
 /// padding||Spacing|3
-$--button-small-padding-horizontal: 13px !default;
+$--button-small-padding-horizontal: 16px !default;
 /// fontSize||Font|1
 $--button-mini-font-size: 12px !default;
-$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
+$--button-mini-border-radius: $--border-radius-base !default;
 /// padding||Spacing|3
 $--button-mini-padding-vertical: 5px !default;
 /// padding||Spacing|3
-$--button-mini-padding-horizontal: 13px !default;
+$--button-mini-padding-horizontal: 16px !default;
 
 /// color||Color|0
-$--button-default-font-color: $--color-text-regular !default;
+$--button-default-font-color: $--color-primary !default;
 /// color||Color|0
 $--button-default-background-color: $--color-white !default;
 /// color||Color|0
-$--button-default-border-color: $--border-color-base !default;
+$--button-default-border-color: $--color-primary !default;
+/// color||Color|0
+$--button-default-font-color-hover: $--color-primary-hover !default;
+/// color||Color|0
+$--button-default-background-color-hover: $--color-primary-background-plain-hover !default;
+/// color||Color|0
+$--button-default-border-color-hover: $--color-primary-hover !default;
+/// color||Color|0
+$--button-default-font-color-plain: $--color-default-text-plain !default;
+/// color||Color|0
+$--button-default-background-color-plain: $--color-white !default;
+/// color||Color|0
+$--button-default-border-color-plain: $--color-default-border-plain !default;
+/// color||Color|0
+$--button-default-font-color-plain-hover: $--color-primary-text-plain-hover !default;
+/// color||Color|0
+$--button-default-background-color-plain-hover: $--color-primary-background-plain-hover !default;
+/// color||Color|0
+$--button-default-border-color-plain-hover: $--color-primary-border-plain-hover !default;
 
 /// color||Color|0
 $--button-disabled-font-color: $--color-text-placeholder !default;
 /// color||Color|0
-$--button-disabled-background-color: #F8F8F8 !default;
+$--button-disabled-background-color: $--background-color-lighter !default;
 /// color||Color|0
-$--button-disabled-border-color: #EBEBEB !default;
+$--button-disabled-border-color: $--border-color-lighter !default;
 
+////button primary
 /// color||Color|0
 $--button-primary-border-color: $--color-primary !default;
 /// color||Color|0
@@ -564,29 +637,127 @@ $--button-primary-font-color: $--color-white !default;
 /// color||Color|0
 $--button-primary-background-color: $--color-primary !default;
 /// color||Color|0
+$--button-primary-border-color-hover: $--color-primary-hover !default;
+/// color||Color|0
+$--button-primary-font-color-hover: $--color-white !default;
+/// color||Color|0
+$--button-primary-background-color-hover: $--color-primary-hover !default;
+/// color||Color|0
+$--button-primary-border-color-plain: $--color-primary-border-plain !default;
+/// color||Color|0
+$--button-primary-font-color-plain: $--color-primary-text-plain !default;
+/// color||Color|0
+$--button-primary-background-color-plain: $--color-primary-background-plain !default;
+/// color||Color|0
+$--button-primary-border-color-plain-hover: $--color-primary-border-plain-hover !default;
+/// color||Color|0
+$--button-primary-font-color-plain-hover: $--color-primary-text-plain-hover !default;
+/// color||Color|0
+$--button-primary-background-color-plain-hover: $--color-primary-background-plain-hover !default;
+
+///button success
+/// color||Color|0
 $--button-success-border-color: $--color-success !default;
 /// color||Color|0
 $--button-success-font-color: $--color-white !default;
 /// color||Color|0
 $--button-success-background-color: $--color-success !default;
 /// color||Color|0
+$--button-success-border-color-hover: $--color-success-hover !default;
+/// color||Color|0
+$--button-success-font-color-hover: $--color-white !default;
+/// color||Color|0
+$--button-success-background-color-hover: $--color-success-hover !default;
+/// color||Color|0
+$--button-success-border-color-plain: $--color-success-border-plain !default;
+/// color||Color|0
+$--button-success-font-color-plain: $--color-success-text-plain !default;
+/// color||Color|0
+$--button-success-background-color-plain: $--color-success-background-plain !default;
+/// color||Color|0
+$--button-success-border-color-plain-hover: $--color-success-border-plain-hover !default;
+/// color||Color|0
+$--button-success-font-color-plain-hover: $--color-success-text-plain-hover !default;
+/// color||Color|0
+$--button-success-background-color-plain-hover: $--color-success-background-plain-hover !default;
+
+///button warning
+/// color||Color|0
 $--button-warning-border-color: $--color-warning !default;
 /// color||Color|0
 $--button-warning-font-color: $--color-white !default;
 /// color||Color|0
 $--button-warning-background-color: $--color-warning !default;
 /// color||Color|0
+$--button-warning-border-color-hover: $--color-warning-hover !default;
+/// color||Color|0
+$--button-warning-font-color-hover: $--color-white !default;
+/// color||Color|0
+$--button-warning-background-color-hover: $--color-warning-hover !default;
+/// color||Color|0
+$--button-warning-border-color-plain: $--color-warning-border-plain !default;
+/// color||Color|0
+$--button-warning-font-color-plain: $--color-warning-text-plain !default;
+/// color||Color|0
+$--button-warning-background-color-plain: $--color-warning-background-plain !default;
+/// color||Color|0
+$--button-warning-border-color-plain-hover: $--color-warning-border-plain-hover !default;
+/// color||Color|0
+$--button-warning-font-color-plain-hover: $--color-warning-text-plain-hover !default;
+/// color||Color|0
+$--button-warning-background-color-plain-hover: $--color-warning-background-plain-hover !default;
+
+///button danger
+/// color||Color|0
 $--button-danger-border-color: $--color-danger !default;
 /// color||Color|0
 $--button-danger-font-color: $--color-white !default;
 /// color||Color|0
 $--button-danger-background-color: $--color-danger !default;
 /// color||Color|0
+$--button-danger-border-color-hover: $--color-danger-hover !default;
+/// color||Color|0
+$--button-danger-font-color-hover: $--color-white !default;
+/// color||Color|0
+$--button-danger-background-color-hover: $--color-danger-hover !default;
+/// color||Color|0
+$--button-danger-border-color-plain: $--color-danger-border-plain !default;
+/// color||Color|0
+$--button-danger-font-color-plain: $--color-danger-text-plain !default;
+/// color||Color|0
+$--button-danger-background-color-plain: $--color-danger-background-plain !default;
+/// color||Color|0
+$--button-danger-border-color-plain-hover: $--color-danger-text-plain-hover !default;
+/// color||Color|0
+$--button-danger-font-color-plain-hover: $--color-danger-text-plain-hover !default;
+/// color||Color|0
+$--button-danger-background-color-plain-hover: $--color-danger-background-plain-hover !default;
+
+///button info
+/// color||Color|0
 $--button-info-border-color: $--color-info !default;
 /// color||Color|0
 $--button-info-font-color: $--color-white !default;
 /// color||Color|0
 $--button-info-background-color: $--color-info !default;
+/// color||Color|0
+$--button-info-border-color-hover: $--color-info-hover !default;
+/// color||Color|0
+$--button-info-font-color-hover: $--color-white !default;
+/// color||Color|0
+$--button-info-background-color-hover: $--color-info-hover !default;
+/// color||Color|0
+$--button-info-border-color-plain: $--color-info-border-plain !default;
+/// color||Color|0
+$--button-info-font-color-plain: $--color-info-text-plain !default;
+/// color||Color|0
+$--button-info-background-color-plain: $--color-info-background-plain !default;
+/// color||Color|0
+$--button-info-border-color-plain-hover: $--color-info-border-plain-hover !default;
+/// color||Color|0
+$--button-info-font-color-plain-hover: $--color-info-text-plain-hover !default;
+/// color||Color|0
+$--button-info-background-color-plain-hover: $--color-info-background-plain-hover !default;
 
 $--button-hover-tint-percent: 20% !default;
 $--button-active-shade-percent: 10% !default;
@@ -992,4 +1163,3 @@ $--breakpoints-spec: (
   'lg-and-down': (max-width: $--xl - 1),
   'xl-only' : (min-width: $--xl),
 );
-

node_module/element-theme-chalk/src/button.scss

@@ -27,18 +27,6 @@
 
   @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
 
-  &:hover,
-  &:focus {
-    color: $--color-primary;
-    border-color: $--color-primary-light-7;
-    background-color: $--color-primary-light-9;
-  }
-
-  &:active {
-    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-    outline: none;
-  }
  
   &::-moz-focus-inner {
     border: 0;
@@ -50,31 +38,10 @@
     }
   }
 
-  @include when(plain) {
-    &:hover,
-    &:focus {
-      background: $--color-white;
-      border-color: $--color-primary;
-      color: $--color-primary;
-    }
-
-    &:active {
-      background: $--color-white;
-      border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-      outline: none;
-    }
-  }
-
-  @include when(active) {
-    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
-  }
 
   @include when(disabled) {
     &,
-    &:hover,
-    &:focus {
+    &:hover {
       color: $--button-disabled-font-color;
       cursor: not-allowed;
       background-image: none;
@@ -88,9 +55,9 @@
 
     &.is-plain {
       &,
-      &:hover,
-      &:focus {
-        background-color: $--color-white;
+      &:hover {
+        cursor: not-allowed;
+        background-color: $--button-disabled-background-color;
         border-color: $--button-disabled-border-color;
         color: $--button-disabled-font-color;
       }
@@ -121,20 +88,48 @@
     border-radius: 50%;
     padding: $--button-padding-vertical;
   }
+
+  @include m(default) {
+    @include button-variant(
+      $--button-default-font-color, $--button-default-background-color, $--button-default-border-color, 
+      $--button-default-font-color-hover, $--button-default-background-color-hover, $--button-default-border-color-hover, 
+      $--button-default-font-color-plain, $--button-default-background-color-plain, $--button-default-border-color-plain,
+      $--button-default-font-color-plain-hover, $--button-default-background-color-plain-hover, $--button-default-border-color-plain-hover);
+  }
   @include m(primary) {
-    @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
+    @include button-variant(
+      $--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color, 
+      $--button-primary-font-color-hover, $--button-primary-background-color-hover, $--button-primary-border-color-hover, 
+      $--button-primary-font-color-plain, $--button-primary-background-color-plain, $--button-primary-border-color-plain,
+      $--button-primary-font-color-plain-hover, $--button-primary-background-color-plain-hover, $--button-primary-border-color-plain-hover);
   }
   @include m(success) {
-    @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
+    @include button-variant(
+      $--button-success-font-color, $--button-success-background-color, $--button-success-border-color, 
+      $--button-success-font-color-hover, $--button-success-background-color-hover, $--button-success-border-color-hover, 
+      $--button-success-font-color-plain, $--button-success-background-color-plain, $--button-success-border-color-plain,
+      $--button-success-font-color-plain-hover, $--button-success-background-color-plain-hover, $--button-success-border-color-plain-hover);
   }
   @include m(warning) {
-    @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
+    @include button-variant(
+      $--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color, 
+      $--button-warning-font-color-hover, $--button-warning-background-color-hover, $--button-warning-border-color-hover, 
+      $--button-warning-font-color-plain, $--button-warning-background-color-plain, $--button-warning-border-color-plain,
+      $--button-warning-font-color-plain-hover, $--button-warning-background-color-plain-hover, $--button-warning-border-color-plain-hover);
   }
   @include m(danger) {
-    @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
+    @include button-variant(
+      $--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color,
+      $--button-danger-font-color-hover, $--button-danger-background-color-hover, $--button-danger-border-color-hover, 
+      $--button-danger-font-color-plain, $--button-danger-background-color-plain, $--button-danger-border-color-plain,
+      $--button-danger-font-color-plain-hover, $--button-danger-background-color-plain-hover, $--button-danger-border-color-plain-hover);
   }
   @include m(info) {
-    @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
+    @include button-variant(
+      $--button-info-font-color, $--button-info-background-color, $--button-info-border-color, 
+      $--button-info-font-color-hover, $--button-info-background-color-hover, $--button-info-border-color-hover, 
+      $--button-info-font-color-plain, $--button-info-background-color-plain, $--button-info-border-color-plain,
+      $--button-info-font-color-plain-hover, $--button-info-background-color-plain-hover, $--button-info-border-color-plain-hover);
   }
   @include m(medium) {
     @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);

node_module/element-theme-chalk/src/mixins/_button.scss

 @import "../common/var";
-@mixin button-plain($color) {
+@mixin button-plain($color, $background-color, $border-color,$color-hover, $background-color-hover, $border-color-hover) {
   color: $color;
-  background: mix($--color-white, $color, 90%);
-  border-color: mix($--color-white, $color, 60%);
+  background: $background-color;
+  border-color: $border-color;
 
-  &:hover,
-  &:focus {
-    @if($color==#4EC87C){
-      background: red;
-      border-color: #CFEFDF;
-      color: $color;
-    }
+  &:hover {
+    background: $background-color-hover;
+    border-color: $border-color-hover;
+    color: $color-hover;
   }
 
   &:active {
-    background: mix($--color-black, $color, $--button-active-shade-percent);
-    border-color: mix($--color-black, $color, $--button-active-shade-percent);
-    color: $--color-white;
+    background: $background-color-hover;
+    border-color: $border-color-hover;
+    color: $color-hover;
     outline: none;
   }
 
   &.is-disabled {
     &,
-    &:hover,
-    &:focus,
+    &:hover
     &:active {
-      color: mix($--color-white, $color, 40%);
-      background-color: mix($--color-white, $color, 90%);
-      border-color: mix($--color-white, $color, 80%);
+      background-color: $--button-disabled-background-color;
+      border-color: $--button-disabled-border-color;
+      color: $--button-disabled-font-color;
     }
   }
 }
 
-@mixin button-variant($color, $background-color, $border-color) {
+@mixin button-variant(
+  $color, $background-color, $border-color, 
+  $color-hover, $background-color-hover, $border-color-hover,
+  $color-plain, $background-color-plain, $border-color-plain,
+  $color-plain-hover, $background-color-plain-hover, $border-color-plain-hover) {
+
   color: $color;
   background-color: $background-color;
   border-color: $border-color;
 
-  &:hover,
-  &:focus {
-    background: mix($--color-white, $background-color, $--button-hover-tint-percent);
-    border-color: mix($--color-white, $border-color, $--button-hover-tint-percent);
-    color: $color;
+  &:hover {
+    background: $background-color-hover;
+    border-color: $border-color-hover;
+    color: $color-hover;
   }
   
   &:active {
-    background: mix($--color-black, $background-color, $--button-active-shade-percent);
-    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
-    color: $color;
+    background: $background-color-hover;
+    border-color: $border-color-hover;
+    color: $color-hover;
     outline: none;
   }
 
   &.is-active {
-    background: mix($--color-black, $background-color, $--button-active-shade-percent);
-    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
-    color: $color;
+    background: $background-color-hover;
+    border-color: $border-color-hover;
+    color: $color-hover;
   }
 
   &.is-disabled {
@@ -62,14 +62,15 @@
     &:hover,
     &:focus,
     &:active {
-      color: $--color-white;
-      background-color: mix($background-color, $--color-white);
-      border-color: mix($border-color, $--color-white);
+      background-color: $--button-disabled-background-color;
+      border-color: $--button-disabled-border-color;
+      color: $--button-disabled-font-color;
     }
   }
 
   &.is-plain {
-    @include button-plain($background-color);
+    @include button-plain($color-plain, $background-color-plain, $border-color-plain,
+  $color-plain-hover, $background-color-plain-hover, $border-color-plain-hover);
   }
 }