diff --git a/src/menu/index.js b/src/menu/index.js
index f1cce48c..42bbecb0 100644
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -135,7 +135,8 @@ const demoElement = {
       children: [
         { path: `${pre}basic-layout`, title: '布局' },
         { path: `${pre}basic-container`, title: '布局容器' },
-        { path: `${pre}basic-color`, title: '颜色' }
+        { path: `${pre}basic-color`, title: '颜色' },
+        { path: `${pre}basic-button`, title: '按钮' }
       ]
     }
   ])('/demo/element/')
diff --git a/src/pages/demo/element/basic-button/index.vue b/src/pages/demo/element/basic-button/index.vue
new file mode 100644
index 00000000..c635a132
--- /dev/null
+++ b/src/pages/demo/element/basic-button/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <d2-container>
+
+    <el-row class="d2-mb">
+      <el-button>默认按钮</el-button>
+      <el-button type="primary">主要按钮</el-button>
+      <el-button type="success">成功按钮</el-button>
+      <el-button type="info">信息按钮</el-button>
+      <el-button type="warning">警告按钮</el-button>
+      <el-button type="danger">危险按钮</el-button>
+    </el-row>
+
+    <el-row class="d2-mb">
+      <el-button plain>朴素按钮</el-button>
+      <el-button type="primary" plain>主要按钮</el-button>
+      <el-button type="success" plain>成功按钮</el-button>
+      <el-button type="info" plain>信息按钮</el-button>
+      <el-button type="warning" plain>警告按钮</el-button>
+      <el-button type="danger" plain>危险按钮</el-button>
+    </el-row>
+
+    <el-row class="d2-mb">
+      <el-button round>圆角按钮</el-button>
+      <el-button type="primary" round>主要按钮</el-button>
+      <el-button type="success" round>成功按钮</el-button>
+      <el-button type="info" round>信息按钮</el-button>
+      <el-button type="warning" round>警告按钮</el-button>
+      <el-button type="danger" round>危险按钮</el-button>
+    </el-row>
+
+    <el-row class="d2-mb">
+      <el-button icon="el-icon-search" circle></el-button>
+      <el-button type="primary" icon="el-icon-edit" circle></el-button>
+      <el-button type="success" icon="el-icon-check" circle></el-button>
+      <el-button type="info" icon="el-icon-message" circle></el-button>
+      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+      <el-button type="danger" icon="el-icon-delete" circle></el-button>
+    </el-row>
+    
+  </d2-container>
+</template>
diff --git a/src/pages/demo/element/basic-color/index.vue b/src/pages/demo/element/basic-color/index.vue
index 949d913a..15883b83 100644
--- a/src/pages/demo/element/basic-color/index.vue
+++ b/src/pages/demo/element/basic-color/index.vue
@@ -1,5 +1,6 @@
 <template>
   <d2-container type="ghost">
+    
     <el-card shadow="never" class="d2-mb">
       <template slot="header">主色</template>
       <el-row :gutter="20">
@@ -10,6 +11,7 @@
         </el-col>
       </el-row>
     </el-card>
+    
     <el-card shadow="never" class="d2-mb">
       <template slot="header">辅助色</template>
       <el-row :gutter="20">
@@ -35,6 +37,7 @@
         </el-col>
       </el-row>
     </el-card>
+    
     <el-card shadow="never">
       <template slot="header">中性色</template>
       <el-row :gutter="20" class="d2-mb">
@@ -82,6 +85,7 @@
         </el-col>
       </el-row>
     </el-card>
+    
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/element/basic-container/index.vue b/src/pages/demo/element/basic-container/index.vue
index e4ebfe69..bd401677 100644
--- a/src/pages/demo/element/basic-container/index.vue
+++ b/src/pages/demo/element/basic-container/index.vue
@@ -1,18 +1,22 @@
 <template>
   <d2-container>
+    
     <el-container class="d2-mb">
       <el-header>顶栏</el-header>
       <el-main>主体</el-main>
     </el-container>
+    
     <el-container class="d2-mb">
       <el-header>顶栏</el-header>
       <el-main>主体</el-main>
       <el-footer>底栏</el-footer>
     </el-container>
+    
     <el-container class="d2-mb">
       <el-aside width="200px">侧边栏</el-aside>
       <el-main>主体</el-main>
     </el-container>
+    
     <el-container class="d2-mb">
       <el-header>顶栏</el-header>
       <el-container>
@@ -20,6 +24,7 @@
         <el-main>主体</el-main>
       </el-container>
     </el-container>
+    
     <el-container class="d2-mb">
       <el-header>顶栏</el-header>
       <el-container>
@@ -30,6 +35,7 @@
         </el-container>
       </el-container>
     </el-container>
+    
     <el-container class="d2-mb">
       <el-aside width="200px">侧边栏</el-aside>
       <el-container>
@@ -37,6 +43,7 @@
         <el-main>主体</el-main>
       </el-container>
     </el-container>
+
     <el-container>
       <el-aside width="200px">侧边栏</el-aside>
       <el-container>
@@ -45,6 +52,7 @@
         <el-footer>底栏</el-footer>
       </el-container>
     </el-container>
+    
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/element/basic-layout/index.vue b/src/pages/demo/element/basic-layout/index.vue
index f53ec7e1..c9bdd31a 100644
--- a/src/pages/demo/element/basic-layout/index.vue
+++ b/src/pages/demo/element/basic-layout/index.vue
@@ -1,5 +1,6 @@
 <template>
   <d2-container type="ghost">
+    
     <el-card shadow="never" class="d2-mb">
       <template slot="header">基础布局</template>
       <el-row>
@@ -29,6 +30,7 @@
         <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
       </el-row>
     </el-card>
+    
     <el-card shadow="never" class="d2-mb">
       <template slot="header">分栏间隔</template>
       <el-row :gutter="20">
@@ -38,6 +40,7 @@
         <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
       </el-row>
     </el-card>
+    
     <el-card shadow="never" class="d2-mb">
       <template slot="header">混合布局</template>
       <el-row :gutter="20">
@@ -56,6 +59,7 @@
         <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
       </el-row>
     </el-card>
+    
     <el-card shadow="never" class="d2-mb">
       <template slot="header">分栏偏移</template>
       <el-row :gutter="20">
@@ -70,6 +74,7 @@
         <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
       </el-row>
     </el-card>
+    
     <el-card shadow="never" class="d2-mb">
       <template slot="header">对齐方式</template>
       <el-row type="flex" class="row-bg">
@@ -98,6 +103,7 @@
         <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
       </el-row>
     </el-card>
+    
     <el-card shadow="never" class="d2-mb">
       <template slot="header">响应式布局</template>
       <el-row :gutter="10">
@@ -107,6 +113,7 @@
         <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
       </el-row>
     </el-card>
+    
   </d2-container>
 </template>
 
diff --git a/src/router/index.js b/src/router/index.js
index a29d89c0..5b53913c 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,6 +111,7 @@ const routes = [
       { path: 'basic-layout', name: `${pre}basic-layout`, component: () => import('@/pages/demo/element/basic-layout/index.vue'), meta },
       { path: 'basic-container', name: `${pre}basic-container`, component: () => import('@/pages/demo/element/basic-container/index.vue'), meta },
       { path: 'basic-color', name: `${pre}basic-color`, component: () => import('@/pages/demo/element/basic-color/index.vue'), meta },
+      { path: 'basic-button', name: `${pre}basic-button`, component: () => import('@/pages/demo/element/basic-button/index.vue'), meta },
       { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/element/index/index.vue'), meta }
     ])('demo-element-')
   },