element-nice-ui/lib/theme-chalk/btn.css

A Component Library for Vue.js.

.el-btn{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;border-color:#dcdfe6;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:0;margin:0;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 18px;font-size:14px;border-radius:4px}.el-btn+.el-btn{margin-left:10px}.el-btn.is-round{padding:12px 18px}.el-btn:hover{color:#409eff;border-color:rgb(197.7,225.9,255);background-color:rgb(235.9,245.3,255)}.el-btn:active{color:rgb(57.6,142.2,229.5);border-color:rgb(57.6,142.2,229.5);outline:0}.el-btn::-moz-focus-inner{border:0}.el-btn [class*=el-icon-]+span{margin-left:2px}.el-btn.is-plain:focus,.el-btn.is-plain:hover{background:#fff;border-color:#409eff;color:#409eff}.el-btn.is-plain:active{background:#fff;border-color:rgb(57.6,142.2,229.5);color:rgb(57.6,142.2,229.5);outline:0}.el-btn.is-active{color:rgb(57.6,142.2,229.5);border-color:rgb(57.6,142.2,229.5)}.el-btn.is-disabled,.el-btn.is-disabled:focus,.el-btn.is-disabled:hover{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5}.el-btn.is-disabled.el-btn--text{background-color:transparent}.el-btn.is-disabled.is-plain,.el-btn.is-disabled.is-plain:focus,.el-btn.is-disabled.is-plain:hover{background-color:#fff;border-color:#ebeef5;color:#c0c4cc}.el-btn.is-loading{position:relative;pointer-events:none}.el-btn.is-loading:before{pointer-events:none;content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:rgba(255,255,255,.35)}.el-btn.is-round{border-radius:20px;padding:12px 23px}.el-btn.is-circle{border-radius:50%;padding:12px}.el-btn--primary{color:#fff;background-color:var(--primary-color,#409eff);border-color:var(--primary-color,#409eff)}.el-btn--primary:hover{background-color:var(--primary-tint-color,#66b1ff);border-color:var(--primary-tint-color,#66b1ff);color:#fff}.el-btn--primary:active{background-color:var(--primary-shade-color,#3a8ee6);border-color:var(--primary-shade-color,#3a8ee6);color:#fff;outline:0}.el-btn--primary.is-active{background-color:var(--primary-shade-color,#3a8ee6);border-color:var(--primary-shade-color,#3a8ee6);color:#fff}.el-btn--primary.is-disabled,.el-btn--primary.is-disabled:active,.el-btn--primary.is-disabled:focus,.el-btn--primary.is-disabled:hover{color:#fff;background-color:var(--primary-disabled-color,#a0cfff);border-color:var(--primary-disabled-color,#a0cfff)}.el-btn--success{color:#fff;background-color:#67c23a;border-color:#67c23a}.el-btn--success:hover{background:rgb(133.4,206.2,97.4);border-color:rgb(133.4,206.2,97.4);color:#fff}.el-btn--success:active{background:rgb(92.7,174.6,52.2);border-color:rgb(92.7,174.6,52.2);color:#fff;outline:0}.el-btn--success.is-active{background:rgb(92.7,174.6,52.2);border-color:rgb(92.7,174.6,52.2);color:#fff}.el-btn--success.is-disabled,.el-btn--success.is-disabled:active,.el-btn--success.is-disabled:focus,.el-btn--success.is-disabled:hover{color:#fff;background-color:rgb(179,224.5,156.5);border-color:rgb(179,224.5,156.5)}.el-btn--success.is-plain{color:#67c23a;background:rgb(239.8,248.9,235.3);border-color:rgb(194.2,230.6,176.2)}.el-btn--success.is-plain:hover{background:#67c23a;border-color:#67c23a;color:#fff}.el-btn--success.is-plain:active{background:rgb(92.7,174.6,52.2);border-color:rgb(92.7,174.6,52.2);color:#fff;outline:0}.el-btn--success.is-plain.is-disabled,.el-btn--success.is-plain.is-disabled:active,.el-btn--success.is-plain.is-disabled:focus,.el-btn--success.is-plain.is-disabled:hover{color:rgb(163.8,218.4,136.8);background-color:rgb(239.8,248.9,235.3);border-color:rgb(224.6,242.8,215.6)}.el-btn--warning{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.el-btn--warning:hover{background:rgb(235,180.6,99);border-color:rgb(235,180.6,99);color:#fff}.el-btn--warning:active{background:rgb(207,145.8,54);border-color:rgb(207,145.8,54);color:#fff;outline:0}.el-btn--warning.is-active{background:rgb(207,145.8,54);border-color:rgb(207,145.8,54);color:#fff}.el-btn--warning.is-disabled,.el-btn--warning.is-disabled:active,.el-btn--warning.is-disabled:focus,.el-btn--warning.is-disabled:hover{color:#fff;background-color:rgb(242.5,208.5,157.5);border-color:rgb(242.5,208.5,157.5)}.el-btn--warning.is-plain{color:#e6a23c;background:rgb(252.5,245.7,235.5);border-color:rgb(245,217.8,177)}.el-btn--warning.is-plain:hover{background:#e6a23c;border-color:#e6a23c;color:#fff}.el-btn--warning.is-plain:active{background:rgb(207,145.8,54);border-color:rgb(207,145.8,54);color:#fff;outline:0}.el-btn--warning.is-plain.is-disabled,.el-btn--warning.is-plain.is-disabled:active,.el-btn--warning.is-plain.is-disabled:focus,.el-btn--warning.is-plain.is-disabled:hover{color:rgb(240,199.2,138);background-color:rgb(252.5,245.7,235.5);border-color:rgb(250,236.4,216)}.el-btn--danger{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.el-btn--danger:hover{background:rgb(247,137.4,137.4);border-color:rgb(247,137.4,137.4);color:#fff}.el-btn--danger:active{background:rgb(220.5,97.2,97.2);border-color:rgb(220.5,97.2,97.2);color:#fff;outline:0}.el-btn--danger.is-active{background:rgb(220.5,97.2,97.2);border-color:rgb(220.5,97.2,97.2);color:#fff}.el-btn--danger.is-disabled,.el-btn--danger.is-disabled:active,.el-btn--danger.is-disabled:focus,.el-btn--danger.is-disabled:hover{color:#fff;background-color:rgb(250,181.5,181.5);border-color:rgb(250,181.5,181.5)}.el-btn--danger.is-plain{color:#f56c6c;background:rgb(254,240.3,240.3);border-color:rgb(251,196.2,196.2)}.el-btn--danger.is-plain:hover{background:#f56c6c;border-color:#f56c6c;color:#fff}.el-btn--danger.is-plain:active{background:rgb(220.5,97.2,97.2);border-color:rgb(220.5,97.2,97.2);color:#fff;outline:0}.el-btn--danger.is-plain.is-disabled,.el-btn--danger.is-plain.is-disabled:active,.el-btn--danger.is-plain.is-disabled:focus,.el-btn--danger.is-plain.is-disabled:hover{color:rgb(249,166.8,166.8);background-color:rgb(254,240.3,240.3);border-color:rgb(253,225.6,225.6)}.el-btn--info{color:#fff;background-color:#909399;border-color:#909399}.el-btn--info:hover{background:rgb(166.2,168.6,173.4);border-color:rgb(166.2,168.6,173.4);color:#fff}.el-btn--info:active{background:rgb(129.6,132.3,137.7);border-color:rgb(129.6,132.3,137.7);color:#fff;outline:0}.el-btn--info.is-active{background:rgb(129.6,132.3,137.7);border-color:rgb(129.6,132.3,137.7);color:#fff}.el-btn--info.is-disabled,.el-btn--info.is-disabled:active,.el-btn--info.is-disabled:focus,.el-btn--info.is-disabled:hover{color:#fff;background-color:rgb(199.5,201,204);border-color:rgb(199.5,201,204)}.el-btn--info.is-plain{color:#909399;background:rgb(243.9,244.2,244.8);border-color:rgb(210.6,211.8,214.2)}.el-btn--info.is-plain:hover{background:#909399;border-color:#909399;color:#fff}.el-btn--info.is-plain:active{background:rgb(129.6,132.3,137.7);border-color:rgb(129.6,132.3,137.7);color:#fff;outline:0}.el-btn--info.is-plain.is-disabled,.el-btn--info.is-plain.is-disabled:active,.el-btn--info.is-plain.is-disabled:focus,.el-btn--info.is-plain.is-disabled:hover{color:rgb(188.4,190.2,193.8);background-color:rgb(243.9,244.2,244.8);border-color:rgb(232.8,233.4,234.6)}.el-btn--medium{padding:10px 16px;font-size:14px;border-radius:4px}.el-btn--medium.is-round{padding:10px 16px}.el-btn--medium.is-circle{padding:10px}.el-btn--small{padding:8px 12px;font-size:12px;border-radius:3px}.el-btn--small.is-round{padding:8px 12px}.el-btn--small.is-circle{padding:8px}.el-btn--mini{padding:6px 10px;font-size:12px;border-radius:3px}.el-btn--mini.is-round{padding:6px 10px}.el-btn--mini.is-circle{padding:6px}.el-btn--text{border-color:transparent;color:var(--primary-color,#409eff);background:0 0;padding-left:0;padding-right:0}.el-btn--text:focus,.el-btn--text:hover{color:var(--primary-tint-color,#409eff);border-color:transparent;background-color:transparent}.el-btn--text:active{color:var(--primary-shade-color,#409eff);border-color:transparent;background-color:transparent}.el-btn--text.is-disabled,.el-btn--text.is-disabled:focus,.el-btn--text.is-disabled:hover{border-color:transparent}.el-btn-group{display:inline-block;vertical-align:middle}.el-btn-group::after,.el-btn-group::before{display:table;content:""}.el-btn-group::after{clear:both}.el-btn-group>.el-btn{float:left;position:relative}.el-btn-group>.el-btn+.el-btn{margin-left:0}.el-btn-group>.el-btn.is-disabled{z-index:1}.el-btn-group>.el-btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.el-btn-group>.el-btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.el-btn-group>.el-btn:first-child:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-top-left-radius:4px;border-bottom-left-radius:4px}.el-btn-group>.el-btn:first-child:last-child.is-round{border-radius:20px}.el-btn-group>.el-btn:first-child:last-child.is-circle{border-radius:50%}.el-btn-group>.el-btn:not(:first-child):not(:last-child){border-radius:0}.el-btn-group>.el-btn:not(:last-child){margin-right:-1px}.el-btn-group>.el-btn:active,.el-btn-group>.el-btn:focus,.el-btn-group>.el-btn:hover{z-index:1}.el-btn-group>.el-btn.is-active{z-index:1}.el-btn-group>.el-dropdown>.el-btn{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--primary:first-child{border-right-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--primary:last-child{border-left-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--primary:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--success:first-child{border-right-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--success:last-child{border-left-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--success:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--warning:first-child{border-right-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--warning:last-child{border-left-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--warning:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--danger:first-child{border-right-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--danger:last-child{border-left-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--danger:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--info:first-child{border-right-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--info:last-child{border-left-color:rgba(255,255,255,.5)}.el-btn-group .el-btn--info:not(:first-child):not(:last-child){border-left-color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.5)}