diff --git a/packages/button/index.ts b/packages/button/index.ts
index 7880e621..9c60e75d 100644
--- a/packages/button/index.ts
+++ b/packages/button/index.ts
@@ -50,32 +50,7 @@ VantComponent({
       type: String,
       value: '20px',
     },
-    color: {
-      type: String,
-      observer(color: string) {
-        let style = '';
-
-        if (color) {
-          style += `color: ${this.data.plain ? color : 'white'};`;
-
-          if (!this.data.plain) {
-            // Use background instead of backgroundColor to make linear-gradient work
-            style += `background: ${color};`;
-          }
-
-          // hide border when color is linear-gradient
-          if (color.indexOf('gradient') !== -1) {
-            style += 'border: 0;';
-          } else {
-            style += `border-color: ${color};`;
-          }
-        }
-
-        if (style !== this.data.baseStyle) {
-          this.setData({ baseStyle: style });
-        }
-      },
-    },
+    color: String,
   },
 
   methods: {
diff --git a/packages/button/index.wxml b/packages/button/index.wxml
index ab393e8f..1d7db84c 100644
--- a/packages/button/index.wxml
+++ b/packages/button/index.wxml
@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <button
   id="{{ id }}"
@@ -7,7 +8,7 @@
   hover-class="van-button--active hover-class"
   lang="{{ lang }}"
   form-type="{{ formType }}"
-  style="{{ baseStyle }} {{ customStyle }}"
+  style="{{ computed.rootStyle({ plain, color }) }} {{ customStyle }}"
   open-type="{{ disabled ? '' : openType }}"
   business-id="{{ businessId }}"
   session-from="{{ sessionFrom }}"
@@ -30,7 +31,7 @@
       custom-class="loading-class"
       size="{{ loadingSize }}"
       type="{{ loadingType }}"
-      color="{{ loadingColor(type,color,plain) }}"
+      color="{{ computed.loadingColor({ type, color, plain }) }}"
     />
     <view wx:if="{{ loadingText }}" class="van-button__loading-text">
       {{ loadingText }}
@@ -50,19 +51,3 @@
     </view>
   </block>
 </button>
-
-
-<wxs module="loadingColor">
-function get(type, color,plain) {
-  if(plain) {
-    return color ? color: '#c9c9c9';
-  }
-
-  if(type === 'default') {
-    return '#c9c9c9';
-  }
-  return 'white';
-}
-
-module.exports = get;
-</wxs>
diff --git a/packages/button/index.wxs b/packages/button/index.wxs
new file mode 100644
index 00000000..7bb506a9
--- /dev/null
+++ b/packages/button/index.wxs
@@ -0,0 +1,39 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function rootStyle(data) {
+  if (!data.color) {
+    return '';
+  }
+
+  var properties = {
+    color: data.plain ? data.color : '#fff',
+    background: data.plain ? null : data.color,
+  };
+
+  // hide border when color is linear-gradient
+  if (data.color.indexOf('gradient') !== -1) {
+    properties.border = 0;
+  } else {
+    properties['border-color'] = data.color;
+  }
+
+  return style(properties);
+}
+
+function loadingColor(data) {
+  if (data.plain) {
+    return data.color ? data.color : '#c9c9c9';
+  }
+
+  if (data.type === 'default') {
+    return '#c9c9c9';
+  }
+
+  return '#fff';
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  loadingColor: loadingColor,
+};