vue-amazing-ui/es/button/Button.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.btn-wrap[data-v-944a889a]{position:relative;display:inline-flex;align-items:center;justify-content:center;font-weight:400;line-height:1.57142857;color:#000000e0;white-space:nowrap;text-align:center;background-color:transparent;border:1px solid transparent;outline:none;-webkit-user-select:none;user-select:none;text-decoration:none;cursor:pointer;transition:all .2s cubic-bezier(.645,.045,.355,1)}.btn-wrap .btn-loading[data-v-944a889a]{display:inline-flex;align-items:center;overflow:hidden;opacity:0;width:0;transition:margin-right .3s cubic-bezier(.645,.045,.355,1),width .3s cubic-bezier(.645,.045,.355,1),opacity .3s cubic-bezier(.645,.045,.355,1)}.btn-wrap .btn-loading .static-circle[data-v-944a889a],.btn-wrap .btn-loading .dynamic-circle[data-v-944a889a]{display:inline-flex;justify-content:start}.btn-wrap .btn-loading .static-circle .circle .path[data-v-944a889a],.btn-wrap .btn-loading .dynamic-circle .circle .path[data-v-944a889a]{stroke:currentColor}.btn-wrap .btn-loading .static-circle .circle[data-v-944a889a]{animation:spinCircle-944a889a .8s linear infinite;-webkit-animation:spinCircle-944a889a .8s linear infinite}.btn-wrap .btn-loading .static-circle .circle .path[data-v-944a889a]{stroke-width:10;stroke-dashoffset:0;stroke-dasharray:84.82px,282.74px}.btn-wrap .btn-loading .dynamic-circle .circle[data-v-944a889a]{animation:spinCircle-944a889a 2s linear infinite;-webkit-animation:spinCircle-944a889a 2s linear infinite}.btn-wrap .btn-loading .dynamic-circle .circle .path[data-v-944a889a]{stroke-width:5;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-linecap:round;animation:loadingDash-944a889a 1.5s ease-in-out infinite;-webkit-animation:loadingDash-944a889a 1.5s ease-in-out infinite}@keyframes loadingDash-944a889a{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-124px}}@keyframes spinCircle-944a889a{to{transform:rotate(360deg)}}.btn-wrap .btn-icon[data-v-944a889a],.btn-wrap .btn-content[data-v-944a889a]{display:inline-flex;align-items:center}.btn-wrap .btn-icon[data-v-944a889a] svg,.btn-wrap .btn-content[data-v-944a889a] svg{fill:currentColor}.btn-wrap .button-wave[data-v-944a889a]{position:absolute;pointer-events:none;inset:0;animation-iteration-count:1;animation-duration:.6s;animation-timing-function:cubic-bezier(0,0,.2,1),cubic-bezier(0,0,.2,1);border-radius:inherit}.btn-wrap .wave-active[data-v-944a889a]{z-index:1;animation-name:waveSpread-944a889a,waveOpacity-944a889a}@keyframes waveSpread-944a889a{0%{box-shadow:0 0 .5px 0 var(--button-ripple-color)}to{box-shadow:0 0 .5px 5.5px var(--button-ripple-color)}}@keyframes waveOpacity-944a889a{0%{opacity:.6}to{opacity:0}}.btn-wrap>.btn-icon+.btn-content[data-v-944a889a]{margin-left:8px}.btn-default[data-v-944a889a]{background-color:#fff;border-color:#d9d9d9}.btn-default[data-v-944a889a]:hover{color:var(--button-primary-color-hover)!important;border-color:var(--button-primary-color-hover)}.btn-default[data-v-944a889a]:active{color:var(--button-primary-color-active)!important;border-color:var(--button-primary-color-active)}.btn-default .btn-icon[data-v-944a889a] svg{transition:fill .2s cubic-bezier(.645,.045,.355,1)}.btn-reverse[data-v-944a889a]{background-color:#fff;border-color:#d9d9d9}.btn-reverse[data-v-944a889a]:hover{color:var(--button-primary-color-hover)!important;border-color:var(--button-primary-color-hover)}.btn-reverse[data-v-944a889a]:active{color:var(--button-primary-color-active)!important;border-color:var(--button-primary-color-active)}.btn-reverse .btn-icon[data-v-944a889a] svg{transition:fill .2s cubic-bezier(.645,.045,.355,1)}.btn-reverse[data-v-944a889a]:hover{color:#fff!important;background-color:var(--button-primary-color);border-color:var(--button-primary-color)}.btn-reverse[data-v-944a889a]:active{color:#fff!important;background-color:var(--button-primary-color-active);border-color:var(--button-primary-color-active)}.btn-primary[data-v-944a889a]{color:#fff;background-color:var(--button-primary-color);border-color:var(--button-primary-color)}.btn-primary[data-v-944a889a]:hover{color:#fff;background-color:var(--button-primary-color-hover);border-color:var(--button-primary-color-hover)}.btn-primary[data-v-944a889a]:active{color:#fff;background-color:var(--button-primary-color-active);border-color:var(--button-primary-color-active)}.btn-danger[data-v-944a889a]{color:#fff;background-color:var(--button-danger-color);border-color:var(--button-danger-color)}.btn-danger[data-v-944a889a]:hover{color:#fff;background-color:var(--button-danger-color-hover);border-color:var(--button-danger-color-hover)}.btn-danger[data-v-944a889a]:active{color:#fff;background-color:var(--button-danger-color-active);border-color:var(--button-danger-color-active)}.btn-dashed[data-v-944a889a]{background-color:#fff;border-color:#d9d9d9;border-style:dashed}.btn-dashed[data-v-944a889a]:hover{color:var(--button-primary-color-hover)!important;border-color:var(--button-primary-color-hover)}.btn-dashed[data-v-944a889a]:active{color:var(--button-primary-color-active)!important;border-color:var(--button-primary-color-active)}.btn-dashed .btn-icon[data-v-944a889a] svg{transition:fill .2s cubic-bezier(.645,.045,.355,1)}.btn-text[data-v-944a889a]:hover{background-color:var(--button-text-color-hover)}.btn-text[data-v-944a889a]:active{background-color:var(--button-text-color-active)}.btn-link[data-v-944a889a]{color:var(--button-primary-color)}.btn-link[data-v-944a889a]:hover{color:var(--button-primary-color-hover)}.btn-link[data-v-944a889a]:active{color:var(--button-primary-color-active)}.btn-link .btn-icon[data-v-944a889a] svg{transition:color .2s cubic-bezier(.645,.045,.355,1)}.btn-small[data-v-944a889a]{font-size:14px;height:24px;padding:0 7px;border-radius:4px}.btn-middle[data-v-944a889a]{font-size:14px;height:32px;padding:4px 15px;border-radius:6px}.btn-large[data-v-944a889a]{font-size:16px;height:40px;padding:6.42857143px 15px;border-radius:8px}.loading-small .btn-loading[data-v-944a889a],.loading-middle .btn-loading[data-v-944a889a],.loading-large .btn-loading[data-v-944a889a]{margin-right:8px;width:1em;opacity:1}.btn-icon-only[data-v-944a889a]{width:32px;padding-left:0;padding-right:0}.btn-icon-only .btn-loading[data-v-944a889a],.btn-icon-only .btn-icon[data-v-944a889a]{transform:scale(1.143)}.btn-icon-only .btn-loading[data-v-944a889a]{margin-right:0}.btn-small.btn-icon-only[data-v-944a889a]{width:24px;padding-left:0;padding-right:0}.btn-large.btn-icon-only[data-v-944a889a]{width:40px;padding-left:0;padding-right:0}.btn-circle[data-v-944a889a]{min-width:32px;padding-left:0;padding-right:0;border-radius:50%}.btn-small.btn-circle[data-v-944a889a]{min-width:24px;padding-left:0;border-radius:50%}.btn-large.btn-circle[data-v-944a889a]{min-width:40px;padding-left:0;padding-right:0;border-radius:50%}.btn-round[data-v-944a889a]{border-radius:32px;padding-left:16px;padding-right:16px}.btn-small.btn-round[data-v-944a889a]{border-radius:24px;padding-left:12px;padding-right:12px}.btn-large.btn-round[data-v-944a889a]{border-radius:40px;padding-left:20px;padding-right:20px}.btn-icon-only.btn-round[data-v-944a889a],.btn-small.btn-icon-only.btn-round[data-v-944a889a],.btn-large.btn-icon-only.btn-round[data-v-944a889a]{width:auto}.btn-loading-blur[data-v-944a889a]{opacity:.65;pointer-events:none}.btn-primary.btn-ghost[data-v-944a889a]:not(.btn-disabled){color:var(--button-primary-color);border-color:var(--button-primary-color);background-color:transparent}.btn-primary.btn-ghost[data-v-944a889a]:not(.btn-disabled):hover{color:var(--button-primary-color-hover);border-color:var(--button-primary-color-hover)}.btn-primary.btn-ghost[data-v-944a889a]:not(.btn-disabled):active{color:var(--button-primary-color-active);border-color:var(--button-primary-color-active)}.btn-primary.btn-ghost:not(.btn-disabled) .btn-icon[data-v-944a889a] svg{transition:color .2s cubic-bezier(.645,.045,.355,1)}.btn-danger.btn-ghost[data-v-944a889a]:not(.btn-disabled){color:var(--button-danger-color);border-color:var(--button-danger-color);background-color:transparent}.btn-danger.btn-ghost[data-v-944a889a]:not(.btn-disabled):hover{color:var(--button-danger-color-hover);border-color:var(--button-danger-color-hover)}.btn-danger.btn-ghost[data-v-944a889a]:not(.btn-disabled):active{color:var(--button-danger-color-active);border-color:var(--button-danger-color-active)}.btn-danger.btn-ghost:not(.btn-disabled) .btn-icon[data-v-944a889a] svg{transition:color .2s cubic-bezier(.645,.045,.355,1)}.btn-block[data-v-944a889a]{width:100%}.btn-disabled[data-v-944a889a]{color:#00000040;cursor:not-allowed}.btn-disabled[data-v-944a889a]:not(.btn-text,.btn-link){border-color:#d9d9d9;background-color:#0000000a}.btn-disabled[data-v-944a889a]:not(.btn-text,.btn-link):hover,.btn-disabled[data-v-944a889a]:not(.btn-text,.btn-link):active{border-color:#d9d9d9;color:#00000040!important;background-color:#0000000a}.btn-disabled.btn-text[data-v-944a889a]:hover,.btn-disabled.btn-text[data-v-944a889a]:active{background-color:transparent}.btn-disabled.btn-link[data-v-944a889a]:hover,.btn-disabled.btn-link[data-v-944a889a]:active{color:#00000040}