diff --git a/.gitignore b/.gitignore
index a0dddc6..85ef4a7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/release
 
 # local env files
 .env.local
diff --git a/examples/styles/variables.scss b/examples/styles/variables.scss
index 99d06ac..9697f55 100644
--- a/examples/styles/variables.scss
+++ b/examples/styles/variables.scss
@@ -16,4 +16,58 @@ $black: #000;
 $text: #314659;
 $border: #e8e8e8;
 $border-light: rgba(#e8e8e8, 0.2);
-$background: #fff;
\ No newline at end of file
+$background: #fff;
+
+// NEW STYLE
+
+// $color-primary: #F39800;
+
+$color-primary: #FDD108;
+
+$color-zy-yellow: #FDD108;
+$color-zy-orage: #F39800;
+$color-zy-green: #074137;
+
+$color-wx: #07c160;
+
+$color-blue: #2F86F6;
+$color-green: #28AA91;
+$color-red: #FF5257;
+$color-blue-dark: #5878B4;
+$color-ink: #2D2D2D;
+$color-grey: #8C8C8C;
+
+$linear-yellow: linear-gradient(135deg, #FDD108 0%, #FFA000 100%);
+$linear-orange: linear-gradient(135deg, #F39800 0%, #FF6400 100%);;
+$linear-green: linear-gradient(135deg, #14C3A5 0%, #117361 100%);;
+
+
+
+$color-text: #2d2d2d;
+$color-text-minor: #8c8c8c;
+$color-black: #000;
+$color-white: #fff;
+$color-border: rgba(151, 151, 151, 0.2);
+$color-field: rgba(151, 151, 151, 0.1);
+
+$color-success: #52c41a;
+$color-warning: #fa8c16;
+$color-error: #f5222d;
+
+$color-minor: #8c8c8c;
+$color-border: #f0f0f0;
+$color-disabled: #ccc;
+
+$bg-active: #f3f3f3;
+$bg-disabled: #f5f5f5;
+
+$font-lg: 1.3125rem;
+$font-md: 0.9375rem;
+$font-sm: 0.6875rem;
+
+$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
diff --git a/packages/button/index.scss b/packages/button/index.scss
index d7df4d8..531ec97 100644
--- a/packages/button/index.scss
+++ b/packages/button/index.scss
@@ -1,63 +1,146 @@
-$primary-zeyi: #FCD404;
-
 .zui-button {
   color: #323233;
   background-color: #fff;
-  border: 1px solid #ebedf0;
-  padding: 0.25rem 1rem;
-  font-size: 0.875rem;
+  padding: $h-gap-md $v-gap-md;
+  font-size: $font-md;
+  font-weight: normal;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
   cursor: pointer;
-  transition: background-color 70ms;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &.sm {
-    padding: 0.125rem 0.25rem;
-    font-size: 0.625rem;
+  transition: all 70ms ease 20ms;
+	border-radius: 0.3125rem;
+  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;
   }
-  &.lg {
-    padding: 0.625rem 1.25rem;
-    font-size: 1.125rem;
+  &.block {
+    display: block;
+    width: 100%;
   }
-  &:active {
-    background-color: #e6e6e6;
-    border-color: #e6e6e6;
+	&.sm {
+		padding: $h-gap-sm $v-gap-sm;
+		font-size: $font-sm;
   }
-  &.primary {
-    background-color: $primary-zeyi;
-    border-color: $primary-zeyi;
-    color: #FFF;
-    &:active {
-      background-color: darken($primary-zeyi, 3%);
-      border-color: darken($primary-zeyi, 3%);
+  &.md {
+		padding: $h-gap-md $v-gap-md;
+		font-size: $font-md;
+	}
+	&.lg {
+		padding: $h-gap-lg $v-gap-lg;
+		font-size: $font-lg;
+	}
+	&:active {
+		background-color: $bg-active;
+		&, &::after {
+			border-color: $bg-active;
+		}
+	}
+	&.primary {
+		background-color: $color-primary;
+		color: #FFF;
+		&:active {
+			background-color: darken($color-primary, 3%);
+			&, &::after {
+				border-color: darken($color-primary, 3%);
+			}
+		}
+		&, &::after {
+			border-color: $color-primary;
+		}
+	}
+	&.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%);
+			}
+		}
+		&, &::after {
+			border-color: lighten($color-primary, 40%);
+		}
+	}
+  &.plain {
+    &.primary {
+      color: $color-primary;
+      background-color: transparent;
+      &:active {
+      	background-color: rgba($color-primary, 0.1);
+      }
     }
-  }
-  &.secondary {
-    color: $primary-zeyi;
-    background-color: rgba($primary-zeyi, 7%);
-    border-color: rgba($primary-zeyi, 7%);
-    &:active {
-      background-color: rgba($primary-zeyi, 20%);
-    border-color: rgba($primary-zeyi, 20%);
-    }
-  }
-  &.link {
-    padding: 0.25rem 1rem;
-    background: inherit;
-    border: inherit;
-    color: $primary-zeyi;
-    &:active {
-      color: darken($primary-zeyi, 3%);
+    &.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;
+    	}
     }
   }
-  &.disabled {
-    border-color: #f5f5f5;
-    background-color: #f5f5f5;
-    color: #ccc;
-    cursor: not-allowed;
-    &:active {
-      border-color: #f5f5f5;
-      background-color: #f5f5f5;
+	&.link {
+		padding: $h-gap-sm $v-gap-sm;
+		background: inherit;
+		border: inherit;
+		color: $color-primary;
+		&:active {
+			color: darken($color-primary, 5%);
+		}
+    &::after {
+      display: none;
     }
-  }
+	}
+	&.disabled {
+		background-color: $bg-disabled;
+		color: $color-disabled;
+		cursor: not-allowed;
+		&:active {
+			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 6f8685b..10e0b5c 100644
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="zui-button" :class="classRender" :style="style" @click="onClick">
+  <button class="zui-button" :class="classRender" @click="onClick">
     <slot></slot>
-  </div>
+  </button>
 </template>
 
 <script>
@@ -23,27 +23,24 @@ export default {
     round: Boolean,
     square: Boolean,
     disabled: Boolean,
+    plain: Boolean,
   },
   computed: {
-    style: function () {
-      return { display: this.block ? '' : 'inline-block', borderRadius: this.borderRadius };
-    },
-    borderRadius: function () {
-      if (this.round) {
-        return '1.25rem';
-      } else if (this.square) {
-        return '0';
-      } else {
-        return '0.25rem';
-      }
-    },
-    classRender: function () {
-      return [this.size, this.disabled ? 'disabled' : '', this.block ? 'block' : '', this.type];
+    classRender() {
+      return {
+        [this.size]: true,
+        [this.type]: true,
+        disabled: this.disabled,
+        block: this.block,
+        round: this.round,
+        square: this.square,
+        plain: this.plain,
+      };
     },
   },
   methods: {
-    onClick: function () {
-      if (this.$listeners['click'] && !this.disabled) {
+    onClick() {
+      if (!this.disabled) {
         this.$emit('click');
       }
     },
--
libgit2 0.21.0