@dove-ui/button/dist/index.css

A button component for vue.

.vc-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;-webkit-appearance:none;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;margin:0;-webkit-transition:.1s;transition:.1s;font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:10px 21px;font-size:14px;border-radius:4px;-webkit-transition:background-color .3s ease,color,border .3s ease,-webkit-box-shadow .3s cubic-bezier(0,0,0,1);transition:background-color .3s ease,color,border .3s ease,-webkit-box-shadow .3s cubic-bezier(0,0,0,1);transition:box-shadow .3s cubic-bezier(0,0,0,1),background-color .3s ease,color,border .3s ease;transition:box-shadow .3s cubic-bezier(0,0,0,1),background-color .3s ease,color,border .3s ease,-webkit-box-shadow .3s cubic-bezier(0,0,0,1);-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;position:relative;overflow:hidden}.vc-button+.vc-button{margin-left:10px}.vc-button--round{border-radius:100px}.vc-button--block{display:block;width:100%}.vc-button--block+.vc-button--block{margin-left:0;margin-top:10px}.vc-button-icon{width:15px;height:15px;display:inline-block;margin-right:5px;vertical-align:middle;margin-top:-5px}.vc-button-size--large{height:40px;padding:12px 30px}.vc-button-size--large .vc-button-icon{width:17px;height:17px;margin-top:-3px}.vc-button-size--medium{height:32px;padding:8px 18px}.vc-button-size--medium .vc-button-icon{margin-top:-4px}.vc-button-size--small{height:28px;padding:6px 15px}.vc-button-size--small .vc-button-icon{margin-top:-3px}.vc-button-size--mini{height:24px;padding:5px 12px;font-size:12px}.vc-button-size--mini .vc-button-icon{margin-top:-1px}.vc-button:focus{-webkit-box-shadow:0 0 0 3px rgba(220,223,230,.25);box-shadow:0 0 0 3px rgba(220,223,230,.25)}.vc-button:active{background-color:#f4f5f9}.vc-button-type--default:hover{border-color:#c6e2ff;background-color:#ecf5ff;color:#409eff}.vc-button-type--default:active{border-color:#3a8ee6}.vc-button-type--text{border:none;background:none;color:#606266}.vc-button-type--text:active,.vc-button-type--text:focus,.vc-button-type--text:hover{color:#04a9ff;-webkit-box-shadow:none;box-shadow:none;background-color:#f8f9ff}.vc-button-type--text:active{background-color:#f2f5fa}.vc-button-type--danger,.vc-button-type--info,.vc-button-type--primary,.vc-button-type--success,.vc-button-type--warning{color:#fff}.vc-button-type--info{background-color:#04a9ff;border-color:#04a9ff}.vc-button-type--info:hover{background-color:#21b2fc;border-color:#21b2fc}.vc-button-type--info:focus{-webkit-box-shadow:0 0 0 3px rgba(4,169,255,.25);box-shadow:0 0 0 3px rgba(4,169,255,.25)}.vc-button-type--info:active{background-color:#00a0f2}.vc-button-type--primary{background-color:#7952b3;border-color:#7952b3}.vc-button-type--primary:hover{background-color:#8e74b4;border-color:#8e74b4}.vc-button-type--primary:focus{-webkit-box-shadow:0 0 0 3px rgba(142,116,180,.25);box-shadow:0 0 0 3px rgba(142,116,180,.25)}.vc-button-type--primary:active{background-color:#7148ad}.vc-button-type--warning{background-color:#f9aa40;border-color:#f9aa40}.vc-button-type--warning:hover{background-color:#fcb452;border-color:#fcb452}.vc-button-type--warning:focus{-webkit-box-shadow:0 0 0 3px rgba(249,170,64,.25);box-shadow:0 0 0 3px rgba(249,170,64,.25)}.vc-button-type--warning:active{background-color:#f5a53e}.vc-button-type--danger{background-color:#f56c6c;border-color:#f56c6c}.vc-button-type--danger:hover{background-color:#f78989;border-color:#f78989}.vc-button-type--danger:focus{-webkit-box-shadow:0 0 0 3px rgba(245,108,108,.25);box-shadow:0 0 0 3px rgba(245,108,108,.25)}.vc-button-type--danger:active{background-color:#ed6767}.vc-button-type--success{background-color:#03b976;border-color:#03b976}.vc-button-type--success:hover{background-color:#08cb83;border-color:#08cb83}.vc-button-type--success:focus{-webkit-box-shadow:0 0 0 3px rgba(3,185,118,.25);box-shadow:0 0 0 3px rgba(3,185,118,.25)}.vc-button-type--success:active{background-color:#05b274}.vc-button--plain{background-color:#fff}.vc-button--plain.vc-button-type--danger:hover,.vc-button--plain.vc-button-type--info:hover,.vc-button--plain.vc-button-type--primary:hover,.vc-button--plain.vc-button-type--success:hover,.vc-button--plain.vc-button-type--warning:hover{color:#fff}.vc-button--plain.vc-button-type--info{color:#04a9ff}.vc-button--plain.vc-button-type--primary{color:#7952b3}.vc-button--plain.vc-button-type--warning{color:#f9aa40}.vc-button--plain.vc-button-type--danger{color:#f56c6c}.vc-button--plain.vc-button-type--success{color:#03b976}.vc-button:disabled.vc-button-type--default{background:#f5f5f5}.vc-button:disabled:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:hsla(0,0%,100%,.3);cursor:not-allowed}.vc-button-group{display:inline-block;font-size:0}.vc-button-group+.vc-button-group{margin-left:10px}.vc-button-group .vc-button{margin-left:-1px;border-radius:0}.vc-button-group .vc-button:focus{z-index:1}.vc-button-group .vc-button:first-child{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.vc-button-group .vc-button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.vc-button .loading-icon{stroke:#343640;stroke-width:3.5;stroke-linecap:round;background:none;vertical-align:middle}.vc-button .loading-icon .loading-icon-bg-path{fill:none;stroke:rgba(0,0,0,.1)}.vc-button .loading-icon .loading-icon-active-path{fill:none;stroke:#20a0ff;-webkit-transform-origin:50% 50%;transform-origin:50% 50%}.vc-button .loading-icon.loading-wipe .loading-icon-active-path{stroke-dasharray:90,150;stroke-dashoffset:0;-webkit-animation:loading-wipe 1.5s ease-in-out infinite,loading-rotate 2s linear infinite;animation:loading-wipe 1.5s ease-in-out infinite,loading-rotate 2s linear infinite}@-webkit-keyframes loading-wipe{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}@keyframes loading-wipe{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}