diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md
index 7f110c895..992cc5ccc 100644
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -48,10 +48,10 @@ Vue.component(Button.name, Button);
:::demo 按钮尺寸
```html
-large
-normal
-small
-mini
+Large
+Normal
+Small
+Mini
```
:::
@@ -61,7 +61,7 @@ Vue.component(Button.name, Button);
:::demo 禁用状态
```html
-diabled
+Diabled
```
:::
@@ -80,7 +80,7 @@ Vue.component(Button.name, Button);
:::demo 自定义按钮标签
```html
- a标签按钮
+ a 标签按钮
```
:::
diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css
index 617c7de6d..0d05cdbf4 100644
--- a/packages/vant-css/src/button.css
+++ b/packages/vant-css/src/button.css
@@ -1,5 +1,4 @@
@import './common/var.css';
-@import './loading.css';
.van-button {
position: relative;
@@ -11,9 +10,9 @@
box-sizing: border-box;
font-size: 16px;
text-align: center;
- appearance: none;
outline: 0;
overflow: hidden;
+ -webkit-appearance: none;
&::after {
content: " ";
@@ -22,8 +21,8 @@
left: 0;
right: 0;
bottom: 0;
- background-color: #000;
opacity: 0;
+ background-color: #000;
border-radius: inherit; /* inherit parent's border radius */
}
@@ -33,9 +32,6 @@
&__icon-loading {
display: inline-block;
- width: 16px;
- height: 16px;
- vertical-align: middle;
}
&--default {
@@ -44,8 +40,6 @@
border: 1px solid $button-default-border-color;
&:active {
- border-color: #cacaca;
- background-color: $c-gray-light;
color: $c-gray-dark;
}
}
@@ -54,30 +48,18 @@
color: $button-primary-color;
background-color: $button-primary-background-color;
border: 1px solid $button-primary-border-color;
-
- &:active {
- border-color: #00AA00;
- background-color: #00AA00;
- color: #66CC66;
- }
}
&--danger {
color: $button-danger-color;
background-color: $button-danger-background-color;
border: 1px solid $button-danger-border-color;
-
- &:active {
- border-color: #D43333;
- background-color: #D43333;
- }
}
&--large {
width: 100%;
height: 50px;
line-height: 48px;
- font-size: 16px;
}
&--normal {
@@ -92,9 +74,7 @@
font-size: 12px;
}
- /*
- mini图标默认宽度50px,文字不能超过4个
- */
+ /* mini图标默认宽度50px,文字不能超过4个 */
&--mini {
display: inline-block;
width: 50px;
@@ -114,14 +94,8 @@
}
&--block {
- display: block;
width: 100%;
- }
-
- &--loading {
- .van-button__text {
- display: none;
- }
+ display: block;
}
&--bottom-action {
@@ -130,24 +104,16 @@
line-height: 50px;
border: 0;
border-radius: 0;
- background-color: $bottom-action-button-default-background-color;
color: $bottom-action-button-default-color;
- font-size: 16px;
+ background-color: $bottom-action-button-default-background-color;
&:active {
- border-color: #DD6F44;
- background-color: #DD6F44;
color: #fff;
}
&.van-button--primary {
- background-color: $bottom-action-button-primary-background-color;
color: $bottom-action-button-primary-color;
-
- &:active {
- border-color: #D43333;
- background-color: #D43333;
- }
+ background-color: $bottom-action-button-primary-background-color;
}
}
}
diff --git a/packages/vant-css/src/common/var.css b/packages/vant-css/src/common/var.css
index 4e89219f5..2edb3809e 100644
--- a/packages/vant-css/src/common/var.css
+++ b/packages/vant-css/src/common/var.css
@@ -23,7 +23,7 @@ $button-primary-border-color: #0a0;
$button-default-color: $c-black;
$button-default-background-color: $c-white;
-$button-default-border-color: #bbb;
+$button-default-border-color: #ccc;
$button-danger-color: $c-white;
$button-danger-background-color: #f44;