tyh-ui2/theme/button.css

The next generation ui component library of tyh-ui is based on vue3 Version, fully embrace vue3.

.tyh-button{min-width:40px;padding:0 22px;min-height:35px;border-radius:5px;cursor:pointer;user-select:none;border:none;outline:none;text-align:center;transition:.3s;color:#fff;line-height:1;font-size:14px}.tyh-button .tyh-ui-loading{display:inline-block;animation:loading 1.2s linear infinite;-webkit-animation:loading 1.2s linear infinite}.tyh-button .tyh-icon{margin-right:5px}.tyh-button.tyh-button-primary{background:#3a6ff4}.tyh-button.tyh-button-primary:hover{background:#5d88f6;opacity:.8;box-shadow:0 0 3px #5d88f6}.tyh-button.tyh-button-primary:active{background:#0852f3}.tyh-button.tyh-button-primary.tyh-button-disabled:hover{background:#3a6ff4;opacity:.6;box-shadow:none}.tyh-button.tyh-button-success{background:#54c600}.tyh-button.tyh-button-success:hover{background:#6bdb18;box-shadow:0 0 3px #6bdb18}.tyh-button.tyh-button-success:active{background:#45a200}.tyh-button.tyh-button-success.tyh-button-disabled:hover{background:#54c600;opacity:.6;box-shadow:none}.tyh-button.tyh-button-danger{background:#d10f1b}.tyh-button.tyh-button-danger:hover{background:#ea3941;box-shadow:0 0 3px #ea3941}.tyh-button.tyh-button-danger:active{background:#b90510}.tyh-button.tyh-button-danger.tyh-button-disabled:hover{background:#d10f1b;opacity:.6;box-shadow:none}.tyh-button.tyh-button-warning{background:#fbcc30}.tyh-button.tyh-button-warning:hover{background:#fbd659;box-shadow:0 0 3px #fbd659}.tyh-button.tyh-button-warning:active{background:#dfb118}.tyh-button.tyh-button-warning.tyh-button-disabled:hover{background:#fbcc30;opacity:.6;box-shadow:none}.tyh-button.tyh-button-,.tyh-button.tyh-button-default{background:#f4f5f5;color:#333}.tyh-button.tyh-button-:hover,.tyh-button.tyh-button-default:hover{background:#eeeeee;box-shadow:0 0 3px #eee}.tyh-button.tyh-button-:active,.tyh-button.tyh-button-default:active{background:#dbdbdb}.tyh-button.tyh-button-.tyh-button-disabled:hover,.tyh-button.tyh-button-default.tyh-button-disabled:hover{background:#f4f5f5;opacity:.6;box-shadow:none}.tyh-button.tyh-button-round{border-radius:30px}.tyh-button.tyh-button-simple{background:#f4f5f5}.tyh-button.tyh-button-simple:hover{background:#eeeeee;box-shadow:0 0 3px #eee}.tyh-button.tyh-button-simple:active{background:#dbdbdb}.tyh-button.tyh-button-simple.tyh-button-disabled:hover{background:#f4f5f5;opacity:.6;box-shadow:none}.tyh-button.tyh-button-disabled{opacity:.6;cursor:no-drop}.tyh-button.tyh-button-large{min-width:50px;padding:0 27px;height:40px;font-size:15px}.tyh-button.tyh-button-small{min-width:30px;padding:0 17px;height:30px;font-size:13px}.tyh-button.tyh-button-mini{min-width:20px;padding:0 12px;height:25px;font-size:12px}.tyh-button.tyh-button-square{border-radius:0}.tyh-button.tyh-button-block{display:block;width:100%}@keyframes loading{0%{transform:rotate(0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}to{transform:rotate(360deg)}}