diff --git a/examples/styles/variables.scss b/examples/styles/variables.scss
index 9697f55..dd901b7 100644
--- a/examples/styles/variables.scss
+++ b/examples/styles/variables.scss
@@ -20,8 +20,6 @@ $background: #fff;
 
 // NEW STYLE
 
-// $color-primary: #F39800;
-
 $color-primary: #FDD108;
 
 $color-zy-yellow: #FDD108;
@@ -33,6 +31,7 @@ $color-wx: #07c160;
 $color-blue: #2F86F6;
 $color-green: #28AA91;
 $color-red: #FF5257;
+$color-yellow: #ffd752;
 $color-blue-dark: #5878B4;
 $color-ink: #2D2D2D;
 $color-grey: #8C8C8C;
@@ -61,13 +60,13 @@ $color-disabled: #ccc;
 $bg-active: #f3f3f3;
 $bg-disabled: #f5f5f5;
 
-$font-lg: 1.3125rem;
-$font-md: 0.9375rem;
-$font-sm: 0.6875rem;
+$font-lg: 1.25rem;
+$font-md: 1rem;
+$font-sm: 0.65rem;
 
-$h-gap-lg: 0.625rem;
-$h-gap-md: 0.468rem;
-$h-gap-sm: 0.3125rem;
-$v-gap-lg: 1.4rem;
-$v-gap-md: 0.9375rem;
-$v-gap-sm: 0.625rem;
\ No newline at end of file
+$h-gap-lg: 0.65rem;
+$h-gap-md: 0.45rem;
+$h-gap-sm: 0.3rem;
+$v-gap-lg: 1.5rem;
+$v-gap-md: 1rem;
+$v-gap-sm: 0.65rem;
\ No newline at end of file
diff --git a/examples/views/docs/component/button.md b/examples/views/docs/component/button.md
index dded211..981eacc 100644
--- a/examples/views/docs/component/button.md
+++ b/examples/views/docs/component/button.md
@@ -11,10 +11,121 @@
 ```html
 <template>
   <div>
-    <zui-button disabled>Default</zui-button>
+    <zui-button>Default</zui-button>
     <zui-button type="primary">Primary</zui-button>
     <zui-button type="secondary">Secondary</zui-button>
-    <zui-button type="link">链接</zui-button>
+    <zui-button type="plain">Plain</zui-button>
+    <zui-button type="link">Link</zui-button>
+  </div>
+</template>
+```
+
+:::
+
+## 按钮主题
+
+配置`theme`属性改变按钮主题
+
+::: snippet 支持`red`、`green`、`blue`
+
+```html
+<template>
+  <div>
+    <div style="padding-top: 10px;">
+      <zui-button theme="red">Default</zui-button>
+      <zui-button type="primary" theme="red">Primary</zui-button>
+      <zui-button type="secondary" theme="red">Secondary</zui-button>
+      <zui-button type="plain" theme="red">Plain</zui-button>
+      <zui-button type="ghost" theme="red">Ghost</zui-button>
+      <zui-button type="link" theme="red">Link</zui-button>
+    </div>
+    <div style="padding-top: 10px;">
+      <zui-button theme="green">Default</zui-button>
+      <zui-button type="primary" theme="green">Primary</zui-button>
+      <zui-button type="secondary" theme="green">Secondary</zui-button>
+      <zui-button type="plain" theme="green">Plain</zui-button>
+      <zui-button type="ghost" theme="green">Ghost</zui-button>
+      <zui-button type="link" theme="green">Link</zui-button>
+    </div>
+    <div style="padding-top: 10px;">
+      <zui-button theme="blue">Default</zui-button>
+      <zui-button type="primary" theme="blue">Primary</zui-button>
+      <zui-button type="secondary" theme="blue">Secondary</zui-button>
+      <zui-button type="plain" theme="blue">Plain</zui-button>
+      <zui-button type="ghost" theme="blue">Ghost</zui-button>
+      <zui-button type="link" theme="blue">Link</zui-button>
+    </div>
+  </div>
+</template>
+```
+
+:::
+
+## 按钮颜色
+
+配置`color`属性改变按钮颜色
+
+::: snippet 支持任意颜色
+
+```html
+<template>
+  <div>
+    <div style="padding-top: 10px;">
+      <zui-button color="#074137">Default</zui-button>
+      <zui-button type="primary" color="#074137">Primary</zui-button>
+      <zui-button type="secondary" color="#074137">Secondary</zui-button>
+      <zui-button type="plain" color="#074137">Plain</zui-button>
+      <zui-button type="ghost" color="#074137">Ghost</zui-button>
+      <zui-button type="link" color="#074137">Link</zui-button>
+    </div>
+    <div style="padding-top: 10px;">
+      <zui-button color="#FDD108">Default</zui-button>
+      <zui-button type="primary" color="#FDD108">Primary</zui-button>
+      <zui-button type="secondary" color="#FDD108">Secondary</zui-button>
+      <zui-button type="plain" color="#FDD108">Plain</zui-button>
+      <zui-button type="ghost" color="#FDD108">Ghost</zui-button>
+      <zui-button type="link" color="#FDD108">Link</zui-button>
+    </div>
+    <div style="padding-top: 10px;">
+      <zui-button color="#F39800">Default</zui-button>
+      <zui-button type="primary" color="#F39800">Primary</zui-button>
+      <zui-button type="secondary" color="#F39800">Secondary</zui-button>
+      <zui-button type="plain" color="#F39800">Plain</zui-button>
+      <zui-button type="ghost" color="#F39800">Ghost</zui-button>
+      <zui-button type="link" color="#F39800">Link</zui-button>
+    </div>
+    <div style="padding-top: 10px;">
+      <zui-button color="#FF5257">Default</zui-button>
+      <zui-button type="primary" color="#FF5257">Primary</zui-button>
+      <zui-button type="secondary" color="#FF5257">Secondary</zui-button>
+      <zui-button type="plain" color="#FF5257">Plain</zui-button>
+      <zui-button type="ghost" color="#FF5257">Ghost</zui-button>
+      <zui-button type="link" color="#FF5257">Link</zui-button>
+    </div>
+    <div style="padding-top: 10px;">
+      <zui-button color="rgb(40, 170, 145)">Default</zui-button>
+      <zui-button type="primary" color="rgb(40, 170, 145)">Primary</zui-button>
+      <zui-button type="secondary" color="rgb(40, 170, 145)">Secondary</zui-button>
+      <zui-button type="plain" color="rgb(40, 170, 145)">Plain</zui-button>
+      <zui-button type="ghost" color="rgb(40, 170, 145)">Ghost</zui-button>
+      <zui-button type="link" color="rgb(40, 170, 145)">Link</zui-button>
+    </div>
+    <div style="padding-top: 10px;">
+      <zui-button color="#2F86F6">Default</zui-button>
+      <zui-button type="primary" color="#2F86F6">Primary</zui-button>
+      <zui-button type="secondary" color="#2F86F6">Secondary</zui-button>
+      <zui-button type="plain" color="#2F86F6">Plain</zui-button>
+      <zui-button type="ghost" color="#2F86F6">Ghost</zui-button>
+      <zui-button type="link" color="#2F86F6">Link</zui-button>
+    </div>
+    <div style="padding-top: 10px;">
+      <zui-button color="#000">Default</zui-button>
+      <zui-button type="primary" color="#000">Primary</zui-button>
+      <zui-button type="secondary" color="#000">Secondary</zui-button>
+      <zui-button type="plain" color="#000">Plain</zui-button>
+      <zui-button type="ghost" color="#000">Ghost</zui-button>
+      <zui-button type="link" color="#000">Link</zui-button>
+    </div>
   </div>
 </template>
 ```
diff --git a/package.json b/package.json
index 967e66b..464373c 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^0.19.2",
+    "color": "^3.1.2",
     "core-js": "^3.6.5",
     "element-theme-chalk": "^2.13.2",
     "element-ui": "^2.13.2",
diff --git a/packages/button/index.scss b/packages/button/index.scss
index 531ec97..fcccd16 100644
--- a/packages/button/index.scss
+++ b/packages/button/index.scss
@@ -6,32 +6,25 @@
   font-weight: normal;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
   cursor: pointer;
-  transition: all 70ms ease 20ms;
-	border-radius: 0.3125rem;
+  transition: all 70ms ease;
+	border-radius: 0.35rem;
   position: relative;
   display: inline-block;
   text-align: center;
   border: none;
   outline: none;
-  line-height: 1.5;
-	&::after {
-    line-height: 1.5;
-		padding: 0;
-		margin: 0;
-		border: none;
-		content: "";
-		pointer-events: none; /* 防止点击触发 */
-		box-sizing: border-box;
-		position: absolute;
-		width: 200%;
-		height: 200%;
-		left: 0;
-		top: 0;
-		border: 1px solid $color-border;
-		border-radius: 0.625rem;
-		transform: scale(0.5);
-		transform-origin: 0 0;
-  }
+	line-height: 1.5;
+	box-sizing: border-box;
+	border: 1px solid transparent;
+	&.red {
+		color: $color-red;
+	}
+	&.blue {
+		color: $color-blue;
+	}
+	&.green {
+		color: $color-green;
+	}
   &.block {
     display: block;
     width: 100%;
@@ -48,99 +41,153 @@
 		padding: $h-gap-lg $v-gap-lg;
 		font-size: $font-lg;
 	}
-	&:active {
+	&.default {
+		border-color: $color-border;
+	}
+	&.button-hover {
 		background-color: $bg-active;
-		&, &::after {
-			border-color: $bg-active;
+	}
+	@mixin fill-mixin($color) {
+		&.button-hover {
+			background-color: $color;
 		}
 	}
 	&.primary {
 		background-color: $color-primary;
 		color: #FFF;
-		&:active {
-			background-color: darken($color-primary, 3%);
-			&, &::after {
-				border-color: darken($color-primary, 3%);
-			}
+		@include fill-mixin(lighten($color-primary, 10%));
+		&.red {
+			background-color: $color-red;
+			@include fill-mixin(lighten($color-red, 10%));
+		}
+		&.green {
+			background-color: $color-green;
+			@include fill-mixin(lighten($color-green, 10%));
 		}
-		&, &::after {
-			border-color: $color-primary;
+		&.blue {
+			background-color: $color-blue;
+			@include fill-mixin(lighten($color-blue, 10%));
 		}
 	}
 	&.secondary {
-		background-color: lighten($color-primary, 40%);
 		color: $color-primary;
-		&:active {
-			background-color: lighten($color-primary, 30%);
-			color: darken($color-primary, 3%);
-			&, &::after {
-				border-color: lighten($color-primary, 30%);
+		background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
+		@include fill-mixin(hsl(hue($color-primary), saturation($color-primary), 90%));
+		&.red {
+			color: $color-red;
+			background-color: hsl(hue($color-red), saturation($color-red), 95%);
+			@include fill-mixin(hsl(hue($color-red), saturation($color-red), 90%));
+		}
+		&.green {
+			color: $color-green;
+			background-color: hsl(hue($color-green), saturation($color-green), 95%);
+			@include fill-mixin(hsl(hue($color-green), saturation($color-green), 90%));
+		}
+		&.blue {
+			color: $color-blue;
+			background-color: hsl(hue($color-blue), saturation($color-blue), 95%);
+			@include fill-mixin(hsl(hue($color-blue), saturation($color-blue), 90%));
+		}
+	}
+	&.plain {
+		color: $color-primary;
+		background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
+		border-color: $color-primary;
+		&:not(.custom).button-hover {
+			background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
+		}
+		&.red {
+			color: $color-red;
+			border-color: $color-red;
+			background-color: hsl(hue($color-red), saturation($color-red), 95%);
+			&:not(.custom).button-hover {
+				background-color: hsl(hue($color-red), saturation($color-red), 90%);
 			}
 		}
-		&, &::after {
-			border-color: lighten($color-primary, 40%);
-		}
-	}
-  &.plain {
-    &.primary {
-      color: $color-primary;
-      background-color: transparent;
-      &:active {
-      	background-color: rgba($color-primary, 0.1);
-      }
-    }
-    &.disabled {
-      background-color: rgba($bg-disabled, 0.1);
-    	color: $color-disabled;
-    	cursor: not-allowed;
-    	&:active {
-    		color: $color-disabled;
-        background-color: rgba($bg-disabled, 0.1);
-    		&, &::after {
-    			border-color: $bg-disabled;
-    		}
-    	}
-    	&, &::after {
-    		border-color: $bg-disabled;
-    	}
-    }
-  }
+		&.green {
+			color: $color-green;
+			border-color: $color-green;
+			background-color: hsl(hue($color-green), saturation($color-green), 95%);
+			&:not(.custom).button-hover {
+				background-color: hsl(hue($color-green), saturation($color-green), 90%);
+			}
+		}
+		&.blue {
+			color: $color-blue;
+			border-color: $color-blue;
+			background-color: hsl(hue($color-blue), saturation($color-blue), 95%);
+			&:not(.custom).button-hover {
+				background-color: hsl(hue($color-blue), saturation($color-blue), 90%);
+			}
+		}
+	}
+	&.ghost {
+		color: $color-primary;
+		background-color: transparent;
+		border-color: $color-primary;
+		&:not(.custom).button-hover {
+			background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
+		}
+		&.red {
+			color: $color-red;
+			border-color: $color-red;
+			&:not(.custom).button-hover {
+				background-color: hsl(hue($color-red), saturation($color-red), 95%);
+			}
+		}
+		&.green {
+			color: $color-green;
+			border-color: $color-green;
+			&:not(.custom).button-hover {
+				background-color: hsl(hue($color-green), saturation($color-green), 95%);
+			}
+		}
+		&.blue {
+			color: $color-blue;
+			border-color: $color-blue;
+			&:not(.custom).button-hover {
+				background-color: hsl(hue($color-blue), saturation($color-blue), 95%);
+			}
+		}
+	}
 	&.link {
-		padding: $h-gap-sm $v-gap-sm;
-		background: inherit;
-		border: inherit;
+		background-color: transparent;
+		border-color: transparent;
 		color: $color-primary;
-		&:active {
-			color: darken($color-primary, 5%);
+		&.button-hover {
+			color: lighten($color-primary, 10%);
+		}
+		&.red {
+			color: $color-red;
+			&.button-hover {
+				color: lighten($color-red, 10%);
+			}
+		}
+		&.green {
+			color: $color-green;
+			&.button-hover {
+				color: lighten($color-green, 10%);
+			}
+		}
+		&.blue {
+			color: $color-blue;
+			&.button-hover {
+				color: lighten($color-blue, 10%);
+			}
 		}
-    &::after {
-      display: none;
-    }
 	}
 	&.disabled {
 		background-color: $bg-disabled;
 		color: $color-disabled;
 		cursor: not-allowed;
-		&:active {
+		&.button-hover {
 			background-color: $bg-disabled;
-			&, &::after {
-				border-color: $bg-disabled;
-			}
-		}
-		&, &::after {
-			border-color: $bg-disabled;
 		}
 	}
 	&.round {
 		border-radius: 1.5rem;
-		&::after {
-			border-radius: 3rem;
-		}
 	}
 	&.square {
 		border-radius: 0;
-		&::after {
-			border-radius: 0;
-		}
 	}
 }
\ No newline at end of file
diff --git a/packages/button/index.vue b/packages/button/index.vue
index 10e0b5c..5f14d84 100644
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@@ -1,10 +1,12 @@
 <template>
-  <button class="zui-button" :class="classRender" @click="onClick">
+  <button class="zui-button" :class="classRender" :style="styleRender" v-on="bindEvents">
     <slot></slot>
   </button>
 </template>
 
 <script>
+import color from 'color';
+
 export default {
   name: 'Button',
   props: {
@@ -23,26 +25,100 @@ export default {
     round: Boolean,
     square: Boolean,
     disabled: Boolean,
-    plain: Boolean,
+    theme: String,
+    color: String,
+    hoverClass: {
+      type: String,
+      default: 'button-hover',
+    },
+    hoverStartTime: {
+      type: Number,
+      default: 0,
+    },
+    hoverStayTime: {
+      type: Number,
+      default: 70,
+    },
+  },
+  data() {
+    return {
+      active: false,
+    };
   },
   computed: {
     classRender() {
       return {
         [this.size]: true,
         [this.type]: true,
+        [this.theme]: !!this.theme,
+        [this.hoverClass]: this.active,
         disabled: this.disabled,
         block: this.block,
         round: this.round,
         square: this.square,
-        plain: this.plain,
+        custom: !!this.color,
       };
     },
-  },
-  methods: {
-    onClick() {
-      if (!this.disabled) {
-        this.$emit('click');
+    styleRender() {
+      if (this.color) {
+        if (this.type === 'primary') {
+          return {
+            backgroundColor: this.active ? color(this.color).lighten(0.2) : this.color,
+            borderColor: this.active ? color(this.color).lighten(0.2) : this.color,
+          };
+        } else if (this.type === 'secondary') {
+          return {
+            backgroundColor: this.active ? color(this.color).lightness(90) : color(this.color).lightness(95),
+            color: this.color,
+          };
+        } else if (this.type === 'plain') {
+          return {
+            borderColor: this.color,
+            color: this.color,
+            backgroundColor: this.active ? color(this.color).lightness(90) : color(this.color).lightness(95),
+          };
+        } else if (this.type === 'ghost') {
+          return {
+            borderColor: this.color,
+            color: this.color,
+            backgroundColor: this.active ? color(this.color).lightness(95) : undefined,
+          };
+        } else {
+          return {
+            color: this.active ? color(this.color).lighten(0.2) : this.color,
+          };
+        }
       }
+      return {};
+    },
+    bindEvents() {
+      const events = this.$listeners || {};
+      const activeEvents = ['mousedown', 'touchstart'];
+      const deactiveEvents = ['mouseup', 'mousemove', 'touchend', 'touchmove'];
+      let safeEvents = { ...events };
+      activeEvents.forEach(key => {
+        safeEvents[key] = e => {
+          const originEvent = events[key];
+          originEvent && originEvent(e);
+          if (this.hoverStartTime) {
+            setTimeout(() => {
+              this.active = true;
+            }, this.hoverStartTime);
+          } else {
+            this.active = true;
+          }
+        };
+      });
+      deactiveEvents.forEach(key => {
+        safeEvents[key] = e => {
+          const originEvent = events[key];
+          originEvent && originEvent(e);
+          setTimeout(() => {
+            this.active = false;
+          }, this.hoverStayTime);
+        };
+      });
+      return safeEvents;
     },
   },
 };
diff --git a/packages/utils/index.js b/packages/utils/index.js
new file mode 100644
index 0000000..02febaf
--- /dev/null
+++ b/packages/utils/index.js
@@ -0,0 +1,120 @@
+export const RGB = ({ r, g, b }) => {
+  return `rgb(${r}, ${g}, ${b})`;
+};
+
+// 将rgb颜色转成hex
+export const RGBToHex = (color = '') => {
+  const rgb = color.split(',');
+  const r = parseInt(rgb[0].split('(')[1]);
+  const g = parseInt(rgb[1]);
+  const b = parseInt(rgb[2].split(')')[0]);
+  const hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+  return hex;
+};
+
+// 将hex颜色转成rgb
+export const HexToRGBA = (hex = '', opacity) => {
+  const red = parseInt(`0x${hex.slice(1, 3)}`);
+  const green = parseInt(`0x${hex.slice(3, 5)}`);
+  const blue = parseInt(`0x${hex.slice(5, 7)}`);
+  const RGBA = `rgba(${red},${green},${blue},${opacity})`;
+  return { red, green, blue, rgba: RGBA };
+};
+
+const RGB_MAX = 255;
+const HUE_MAX = 360;
+const SV_MAX = 100;
+
+export const HexToHSL = hex => {
+  const { red, green, blue } = HexToRGBA(hex);
+  return RGBToHSL(red, green, blue);
+};
+
+export const HSLToRGB = function (h, s, l) {
+  function _hue2Rgb(p, q, t) {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  }
+
+  function _normalizeAngle(degrees) {
+    return ((degrees % 360) + 360) % 360;
+  }
+
+  if (typeof h === 'object') {
+    const args = h;
+    h = args.h;
+    s = args.s;
+    l = args.l;
+  }
+
+  var r, g, b;
+
+  h = _normalizeAngle(h);
+  h = h === HUE_MAX ? 1 : (h % HUE_MAX) / parseFloat(HUE_MAX);
+  s = s === SV_MAX ? 1 : (s % SV_MAX) / parseFloat(SV_MAX);
+  l = l === SV_MAX ? 1 : (l % SV_MAX) / parseFloat(SV_MAX);
+
+  if (s === 0) {
+    r = g = b = l; // achromatic
+  } else {
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    var p = 2 * l - q;
+    r = _hue2Rgb(p, q, h + 1 / 3);
+    g = _hue2Rgb(p, q, h);
+    b = _hue2Rgb(p, q, h - 1 / 3);
+  }
+
+  return {
+    r: Math.round(r * RGB_MAX),
+    g: Math.round(g * RGB_MAX),
+    b: Math.round(b * RGB_MAX),
+  };
+};
+
+export const RGBToHSL = (r, g, b) => {
+  if (typeof r === 'object') {
+    const args = r;
+    r = args.r;
+    g = args.g;
+    b = args.b;
+  }
+  // It converts [0,255] format, to [0,1]
+  r = r === RGB_MAX ? 1 : (r % RGB_MAX) / parseFloat(RGB_MAX);
+  g = g === RGB_MAX ? 1 : (g % RGB_MAX) / parseFloat(RGB_MAX);
+  b = b === RGB_MAX ? 1 : (b % RGB_MAX) / parseFloat(RGB_MAX);
+
+  var max = Math.max(r, g, b);
+  var min = Math.min(r, g, b);
+  var h,
+    s,
+    l = (max + min) / 2;
+
+  if (max === min) {
+    h = s = 0; // achromatic
+  } else {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+
+  return {
+    h: Math.round(h * HUE_MAX),
+    s: Math.round(s * SV_MAX),
+    l: Math.round(l * SV_MAX),
+  };
+};
diff --git a/yarn.lock b/yarn.lock
index 5a78f98..0d4b7a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2798,7 +2798,7 @@ color-string@^1.5.2:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.0.0:
+color@^3.0.0, color@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npm.taobao.org/color/download/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
   integrity sha1-aBSOf4XUGtdknF+oyBBvCY0inhA=
--
libgit2 0.21.0