diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
index 5a558ed963..9f1e530d3e 100644
--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@@ -17,6 +17,7 @@ ReactDOM.render(<div>
   <Button type="primary">主按钮</Button>
   <Button>次按钮</Button>
   <Button type="ghost">幽灵按钮</Button>
+  <Button type="dashed">虚线按钮</Button>
 </div>,
 document.getElementById('components-button-demo-basic'));
 ````
diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
index 8ebbb31ad1..4e1e866955 100644
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@@ -18,6 +18,9 @@ ReactDOM.render(<div>
   <br />
   <Button type="ghost">幽灵按钮</Button>
   <Button type="ghost" disabled>幽灵按钮(失效)</Button>
+  <br />
+  <Button type="dashed">虚线按钮</Button>
+  <Button type="dashed" disabled>虚线按钮(失效)</Button>
 </div>
 , document.getElementById('components-button-demo-disabled'));
 ````
diff --git a/style/components/button.less b/style/components/button.less
index 5995a585ca..cee2f171e3 100644
--- a/style/components/button.less
+++ b/style/components/button.less
@@ -34,6 +34,10 @@
     .btn-ghost;
   }
 
+  &-dashed {
+    .btn-dashed;
+  }
+
   &-circle,
   &-circle-outline {
     .btn-circle(@btn-prefix-cls);
diff --git a/style/mixins/button.less b/style/mixins/button.less
index 2019a9b444..ba189d5ba2 100644
--- a/style/mixins/button.less
+++ b/style/mixins/button.less
@@ -160,6 +160,20 @@
   }
 }
 
+// ghost button style
+.btn-dashed() {
+  .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
+  border-style: dashed;
+
+  &:hover {
+    .button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
+  }
+  &:active,
+  &.active {
+    .button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
+  }
+}
+
 // circle button: the content only contains icon
 .btn-circle(@btnClassName: btn) {
   .square(@btn-circle-size);