drip-ui/es/drip-css/button.css

Lightweight Mobile UI Components built on Vue

.drip-button{position:relative;padding:0;display:inline-block;height:.8rem;line-height:.77333rem;border-radius:.4rem;box-sizing:border-box;font-size:.34667rem;text-align:center;-webkit-appearance:none;-webkit-text-size-adjust:100%}.drip-button::before{content:" ";position:absolute;top:50%;left:50%;opacity:0;width:100%;height:100%;border:inherit;border-color:#000;background-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.drip-button:active::before{opacity:.3}.drip-button--unclickable::before{display:none}.drip-button--default{color:#888;background-color:#fff;border:1px solid #dadada}.drip-button--blue{color:#fff;background-color:#126ef8;border:1px solid #126ef8}.drip-button--orange{color:#fff;background-color:#ffab11;border:1px solid #ffab11}.drip-button--green{color:#fff;background-color:#5fa800;border:1px solid #5fa800}.drip-button--plain{background-color:#fff}.drip-button--plain.drip-button--blue{color:#126ef8}.drip-button--plain.drip-button--orange{color:#ffab11}.drip-button--plain.drip-button--green{color:#5fa800}.drip-button--large{width:100%;max-width:8.93333rem;height:1.33333rem;line-height:1.30667rem;border-radius:.66667rem;font-size:.48rem}.drip-button--normal{min-width:2.13333rem;padding:0 .33333rem;font-size:.37333rem}.drip-button--small{min-width:1.86667rem;height:.64rem;padding:0 .21333rem;font-size:.32rem;line-height:.64rem}.drip-button--loading .drip-loading{display:inline-block}.drip-button--block{width:100%;display:block}.drip-button--bottom-action{width:100%;height:1.33333rem;line-height:1.33333rem;border:0;border-radius:0;font-size:.42667rem;color:#fff;background-color:#ffab11}.drip-button--disabled{opacity:.5}.drip-button--round{border-radius:10em}.drip-button--square{border-radius:0}