docs(Button): update demo (#6871)

src/button/README.zh-CN.md

@@ -13,19 +13,19 @@ Vue.use(Button);
 
 ### 按钮类型
 
-支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`
+按钮支持 `default`、`primary`、`info`、`warning`、`danger` 五种类型，默认为 `default`。
 
 ```html
-<van-button type="default">默认按钮</van-button>
 <van-button type="primary">主要按钮</van-button>
 <van-button type="info">信息按钮</van-button>
+<van-button type="default">默认按钮</van-button>
 <van-button type="warning">警告按钮</van-button>
 <van-button type="danger">危险按钮</van-button>
 ```
 
 ### 朴素按钮
 
-通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
+通过 `plain` 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
 
 ```html
 <van-button plain type="primary">朴素按钮</van-button>
@@ -34,7 +34,7 @@ Vue.use(Button);
 
 ### 细边框
 
-设置`hairline`属性可以开启 0.5px 边框，基于伪类实现
+设置 `hairline` 属性可以展示 0.5px 的细边框。
 
 ```html
 <van-button plain hairline type="primary">细边框按钮</van-button>
@@ -43,7 +43,7 @@ Vue.use(Button);
 
 ### 禁用状态
 
-通过`disabled`属性来禁用按钮，禁用状态下按钮不可点击
+通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
 
 ```html
 <van-button disabled type="primary">禁用状态</van-button>
@@ -52,7 +52,7 @@ Vue.use(Button);
 
 ### 加载状态
 
-通过`loading`属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过`loading-text`设置加载状态下的文字
+通过 `loading` 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 `loading-text` 设置加载状态下的文字。
 
 ```html
 <van-button loading type="primary" />
@@ -62,7 +62,7 @@ Vue.use(Button);
 
 ### 按钮形状
 
-通过`square`设置方形按钮，通过`round`设置圆形按钮
+通过 `square` 设置方形按钮，通过 `round` 设置圆形按钮。
 
 ```html
 <van-button square type="primary">方形按钮</van-button>
@@ -71,19 +71,19 @@ Vue.use(Button);
 
 ### 图标按钮
 
-通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
+通过 `icon` 属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。
 
 ```html
-<van-button icon="star-o" type="primary" />
-<van-button icon="star-o" type="primary">按钮</van-button>
-<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
-  >按钮</van-button
->
+<van-button icon="plus" type="primary" />
+<van-button icon="plus" type="primary">按钮</van-button>
+<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info">
+  按钮
+</van-button>
 ```
 
 ### 按钮尺寸
 
-支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
+支持 `large`、`normal`、`small`、`mini` 四种尺寸，默认为 `normal`。
 
 ```html
 <van-button type="primary" size="large">大号按钮</van-button>
@@ -94,7 +94,7 @@ Vue.use(Button);
 
 ### 块级元素
 
-按钮在默认情况下为行内块级元素，通过`block`属性可以将按钮的元素类型设置为块级元素
+按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素。
 
 ```html
 <van-button type="primary" block>块级元素</van-button>
@@ -102,7 +102,7 @@ Vue.use(Button);
 
 ### 页面导航
 
-可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
+可以通过 `url` 属性进行 URL 跳转，或通过 `to` 属性进行路由跳转。
 
 ```html
 <van-button type="primary" url="/vant/mobile.html">URL 跳转</van-button>
@@ -111,14 +111,14 @@ Vue.use(Button);
 
 ### 自定义颜色
 
-通过`color`属性可以自定义按钮的颜色
+通过 `color` 属性可以自定义按钮的颜色。
 
 ```html
 <van-button color="#7232dd">单色按钮</van-button>
 <van-button color="#7232dd" plain>单色按钮</van-button>
-<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
-  >渐变色按钮</van-button
->
+<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
+  渐变色按钮
+</van-button>
 ```
 
 ## API