按钮不可用的样式实践

css的按钮不可用，方式很多，看了vux的按钮不可用的样式，就是把原来的颜色和背景透明的60%，很简单

.btn-disabled {

color: rgba(255, 255, 255, 0.6) !important;

background: rgba(48, 148, 248, 0.6) !important;

}

vuex的效果

这个还是麻烦，能不能直接改透明度，发现还真有opacity规则，详见http://www.w3school.com.cn/cssref/pr_opacity.asp。

修改一下

.btn-disabled {

opacity:0.6;

}

感觉很简单的css规则，效果

附上这个按钮的代码，是vue实现的：

<span class="btn-span" @click="autoAsyncMarket" :class="{'btn-disabled' : syncMarketMask}">全部同步超市</span>



.btn-span {

background: rgb(48, 148, 248);

color: #fff;

padding: 0px 12px;

border-radius: 5px;

border-radius: 15px;

line-height: 25px;

height: 25px;

margin: auto 10px auto 14px;

}