diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap
index b6494f78a6..711b95dd1d 100644
--- a/components/button/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.js.snap
@@ -606,7 +606,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
 `;
 
 exports[`renders ./components/button/demo/loading.md correctly 1`] = `
-<span>
+<div>
   <button
     class="ant-btn ant-btn-primary ant-btn-loading"
     type="button"
@@ -746,7 +746,7 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
       </svg>
     </i>
   </button>
-</span>
+</div>
 `;
 
 exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md
index cf18d4397e..3c4eb4d01a 100644
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@@ -32,7 +32,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <span>
+      <div>
         <Button type="primary" loading>
           Loading
         </Button>
@@ -49,7 +49,7 @@ class App extends React.Component {
         <br />
         <Button shape="circle" loading />
         <Button type="primary" shape="circle" loading />
-      </span>
+      </div>
     );
   }
 }
diff --git a/components/button/style/index.less b/components/button/style/index.less
index ef37197750..0bfea59dd3 100644
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -107,14 +107,17 @@
     }
   }
 
+  &&-loading {
+    position: relative;
+    pointer-events: none;
+  }
+
   &&-loading::before {
     display: block;
   }
 
   &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
-    position: relative;
     padding-left: 29px;
-    pointer-events: none;
     .@{iconfont-css-prefix}:not(:last-child) {
       margin-left: -14px;
     }