diff --git a/docs/examples/button.md b/docs/examples/button.md
index 512e3af6c..42c974e36 100644
--- a/docs/examples/button.md
+++ b/docs/examples/button.md
@@ -1,7 +1,7 @@
 <style lang="css">
   @component-namespace z {
     @component button-group {
-      .z-button-1-1 {
+      .z-button-1 {
         margin-bottom: 15px;
       }
     }
@@ -15,13 +15,13 @@
 :::demo 只接受primary, default, danger三种类型，默认default
 ```html
 <div class="z-button-group">
-  <div class="z-button-1-1">
+  <div class="z-button-1">
     <z-button>default</z-button>
   </div>
-  <div class="z-button-1-1">
+  <div class="z-button-1">
     <z-button type="primary">primary</z-button>
   </div>
-  <div class="z-button-1-1">
+  <div class="z-button-1">
     <z-button type="danger">danger</z-button>
   </div>
 </div>
@@ -33,7 +33,7 @@
 :::demo 
 ```html
 <div class="z-button-group">
-  <div class="z-button-1-1">
+  <div class="z-button-1">
     <z-button disabled>diabled</z-button>
   </div>
 </div>
@@ -45,18 +45,18 @@
 :::demo 只接受large, normal, small, mini四种尺寸，默认normal
 ```html 
 <div class="z-button-group">
-  <div class="z-button-1-1">
+  <div class="z-button-1">
     <z-button size="large">large</z-button>
   </div>
 </div>
 <div class="z-button-group" :style="{ width: '50%' }">
-  <div class="z-button-3-1">
+  <div class="z-button-3">
     <z-button type="primary">normal</z-button>
   </div>
-  <div class="z-button-3-1">
+  <div class="z-button-3">
     <z-button size="small">small</z-button>
   </div>
-  <div class="z-button-3-1">
+  <div class="z-button-3">
     <z-button size="mini">mini</z-button>
   </div>
 </div>
@@ -69,13 +69,24 @@
 :::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
 ```html 
 <div class="z-button-group">
-  <div class="z-button-1-1">
+  <div class="z-button-1">
     <z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
   </div>
 </div>
 ```
 :::
 
+### button group
+:::demo 一组按钮
+```html 
+<div class="z-button-group">
+  <z-button type="primary" size="small">确认付款</z-button>
+  <z-button size="small">确认收货</z-button>
+  <z-button size="small">取消订单</z-button>
+</div>
+```
+:::
+
 
 ### API
 
diff --git a/packages/zanui-css/src/button_group.pcss b/packages/zanui-css/src/button_group.pcss
index 491d7b1a7..e2e74cd6f 100644
--- a/packages/zanui-css/src/button_group.pcss
+++ b/packages/zanui-css/src/button_group.pcss
@@ -2,7 +2,7 @@
   display: inline-block;
   box-sizing: border-box;
   padding-right: 10px;
-  &:last-child {
+  &::last-child {
     padding-right: 0;
   }
   .z-button {
@@ -13,16 +13,23 @@
 @component-namespace z {
   @b button-group {
     font-size: 0;
+
+    > .z-button {
+      margin-right: 10px;
+      &::last-child {
+        margin-right: 0;
+      }
+    }
   }
-  @b button-1-1 {
+  @b button-1 {
     @mixin button-wrap;
     width: 100%;
   }
-  @b button-2-1 {
+  @b button-2 {
     @mixin button-wrap;
     width: 50%;
   }
-  @b button-3-1 {
+  @b button-3 {
     @mixin button-wrap;
     width: 33.33%;
   }