diff --git a/src/button/index.tsx b/src/button/index.tsx
index 6332b1a21..7d430d0ae 100644
--- a/src/button/index.tsx
+++ b/src/button/index.tsx
@@ -64,7 +64,8 @@ function Button(
     style.color = plain ? color : WHITE;
 
     if (!plain) {
-      style.backgroundColor = color;
+      // Use background instead of backgroundColor to make linear-gradient work
+      style.background = color;
     }
   }
 
diff --git a/src/button/test/__snapshots__/demo.spec.js.snap b/src/button/test/__snapshots__/demo.spec.js.snap
index bec3a605a..4a14d2b39 100644
--- a/src/button/test/__snapshots__/demo.spec.js.snap
+++ b/src/button/test/__snapshots__/demo.spec.js.snap
@@ -32,6 +32,6 @@ exports[`renders demo correctly 1`] = `
       迷你按钮
     </span></button></div>
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
-  <div><button class="van-button van-button--default van-button--normal" style="border-color: #7232dd; color: rgb(255, 255, 255); background-color: rgb(114, 50, 221);"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="border-color: #7232dd; color: rgb(114, 50, 221);"><span class="van-button__text">自定义颜色</span></button></div>
+  <div><button class="van-button van-button--default van-button--normal" style="border-color: #7232dd; color: rgb(255, 255, 255); background: rgb(114, 50, 221);"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="border-color: #7232dd; color: rgb(114, 50, 221);"><span class="van-button__text">自定义颜色</span></button></div>
 </div>
 `;