dm-vue3-ui/lib/button/index.css

This Components Library will help get you started developing in Vue 3.

.dm-button[data-v-bdc2e67b]{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)}.dm-button .btn-loading[data-v-bdc2e67b]{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)}.dm-button .btn-loading .m-static-circle[data-v-bdc2e67b],.dm-button .btn-loading .m-dynamic-circle[data-v-bdc2e67b]{display:inline-flex;justify-content:start}.dm-button .btn-loading .m-static-circle .circle .path[data-v-bdc2e67b],.dm-button .btn-loading .m-dynamic-circle .circle .path[data-v-bdc2e67b]{stroke:currentColor}.dm-button .btn-loading .m-static-circle .circle[data-v-bdc2e67b]{animation:spin-circle-bdc2e67b .8s linear infinite;-webkit-animation:spin-circle-bdc2e67b .8s linear infinite}.dm-button .btn-loading .m-static-circle .circle .path[data-v-bdc2e67b]{stroke-width:10;stroke-dashoffset:0;stroke-dasharray:84.82px,282.74px}.dm-button .btn-loading .m-dynamic-circle .circle[data-v-bdc2e67b]{animation:spin-circle-bdc2e67b 2s linear infinite;-webkit-animation:spin-circle-bdc2e67b 2s linear infinite}.dm-button .btn-loading .m-dynamic-circle .circle .path[data-v-bdc2e67b]{stroke-width:5;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-linecap:round;animation:loading-dash-bdc2e67b 1.5s ease-in-out infinite;-webkit-animation:loading-dash-bdc2e67b 1.5s ease-in-out infinite}@keyframes loading-dash-bdc2e67b{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 spin-circle-bdc2e67b{to{transform:rotate(360deg)}}.dm-button .btn-icon[data-v-bdc2e67b],.dm-button .btn-content[data-v-bdc2e67b]{display:inline-flex;align-items:center}.dm-button .btn-icon[data-v-bdc2e67b] svg,.dm-button .btn-content[data-v-bdc2e67b] svg{fill:currentColor}.dm-button .button-wave[data-v-bdc2e67b]{position:absolute;pointer-events:none;top:0;right:0;bottom:0;left: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}.dm-button .wave-active[data-v-bdc2e67b]{z-index:1;animation-name:wave-spread,wave-opacity-bdc2e67b}@keyframes wave-opacity-bdc2e67b{0%{opacity:.6}to{opacity:0}}.dm-button>.btn-icon+.btn-content[data-v-bdc2e67b]{margin-left:8px}.btn-default[data-v-bdc2e67b]{background-color:#fff;border-color:#d9d9d9}.btn-default[data-v-bdc2e67b]:hover{color:#7857fccc;border-color:#7857fccc}.btn-default[data-v-bdc2e67b]:active{color:#6a4dde;border-color:#6a4dde}.btn-default .btn-icon[data-v-bdc2e67b] svg{transition:fill .2s cubic-bezier(.645,.045,.355,1)}.btn-reverse[data-v-bdc2e67b]{background-color:#fff;border-color:#d9d9d9}.btn-reverse[data-v-bdc2e67b]:hover{color:#7857fccc;border-color:#7857fccc}.btn-reverse[data-v-bdc2e67b]:active{color:#6a4dde;border-color:#6a4dde}.btn-reverse .btn-icon[data-v-bdc2e67b] svg{transition:fill .2s cubic-bezier(.645,.045,.355,1)}.btn-reverse[data-v-bdc2e67b]:hover{color:#fff!important;background-color:#7857fccc;border-color:#7857fccc}.btn-reverse[data-v-bdc2e67b]:active{color:#fff!important;background-color:#6a4dde;border-color:#6a4dde}.btn-primary[data-v-bdc2e67b]{color:#fff;background-color:#7857fc;border-color:#7857fc}.btn-primary[data-v-bdc2e67b]:hover{color:#fff;background-color:#7857fccc;border-color:#7857fccc}.btn-primary[data-v-bdc2e67b]:active{color:#fff;background-color:#6a4dde;border-color:#6a4dde}.btn-danger[data-v-bdc2e67b]{color:#fff;background-color:#ff4d4f;border-color:#ff4d4f}.btn-danger[data-v-bdc2e67b]:hover{color:#fff;background-color:#ff7875;border-color:#ff7875}.btn-danger[data-v-bdc2e67b]:active{color:#fff;background-color:#d9363e;border-color:#d9363e}.btn-dashed[data-v-bdc2e67b]{background-color:#fff;border-color:#d9d9d9;border-style:dashed}.btn-dashed[data-v-bdc2e67b]:hover{color:#7857fccc;border-color:#7857fccc}.btn-dashed[data-v-bdc2e67b]:active{color:#6a4dde;border-color:#6a4dde}.btn-dashed .btn-icon[data-v-bdc2e67b] svg{transition:fill .2s cubic-bezier(.645,.045,.355,1)}.btn-text[data-v-bdc2e67b]:hover{background-color:#0000000f}.btn-text[data-v-bdc2e67b]:active{background-color:#00000026}.btn-link[data-v-bdc2e67b]{color:#7857fc}.btn-link[data-v-bdc2e67b]:hover{color:#7857fccc}.btn-link[data-v-bdc2e67b]:active{color:#6a4dde}.btn-link .btn-icon[data-v-bdc2e67b] svg{transition:color .2s cubic-bezier(.645,.045,.355,1)}.btn-small[data-v-bdc2e67b]{font-size:14px;height:24px;padding:0 7px;border-radius:4px}.btn-middle[data-v-bdc2e67b]{font-size:14px;height:34px;padding:4px 15px;border-radius:4px}.btn-large[data-v-bdc2e67b]{font-size:16px;height:40px;padding:6.42857143px 15px;border-radius:4px}.loading-small .btn-loading[data-v-bdc2e67b],.loading-middle .btn-loading[data-v-bdc2e67b],.loading-large .btn-loading[data-v-bdc2e67b]{margin-right:8px;width:1em;opacity:1}.btn-icon-only[data-v-bdc2e67b]{width:32px;padding-left:0;padding-right:0}.btn-icon-only .btn-loading[data-v-bdc2e67b],.btn-icon-only .btn-icon[data-v-bdc2e67b]{transform:scale(1.143)}.btn-icon-only .btn-loading[data-v-bdc2e67b]{margin-right:0}.btn-small.btn-icon-only[data-v-bdc2e67b]{width:24px;padding-left:0;padding-right:0}.btn-large.btn-icon-only[data-v-bdc2e67b]{width:40px;padding-left:0;padding-right:0}.btn-circle[data-v-bdc2e67b]{min-width:32px;padding-left:0;padding-right:0;border-radius:50%}.btn-small.btn-circle[data-v-bdc2e67b]{min-width:24px;padding-left:0;border-radius:50%}.btn-large.btn-circle[data-v-bdc2e67b]{min-width:40px;padding-left:0;padding-right:0;border-radius:50%}.btn-round[data-v-bdc2e67b]{border-radius:32px;padding-left:16px;padding-right:16px}.btn-small.btn-round[data-v-bdc2e67b]{border-radius:24px;padding-left:12px;padding-right:12px}.btn-large.btn-round[data-v-bdc2e67b]{border-radius:40px;padding-left:20px;padding-right:20px}.btn-icon-only.btn-round[data-v-bdc2e67b],.btn-small.btn-icon-only.btn-round[data-v-bdc2e67b],.btn-large.btn-icon-only.btn-round[data-v-bdc2e67b]{width:auto}.btn-loading-blur[data-v-bdc2e67b]{opacity:.65;pointer-events:none}.btn-primary.btn-ghost[data-v-bdc2e67b]:not(.btn-disabled){color:#7857fc;border-color:#7857fc;background-color:transparent}.btn-primary.btn-ghost[data-v-bdc2e67b]:not(.btn-disabled):hover{color:#7857fccc;border-color:#7857fccc}.btn-primary.btn-ghost[data-v-bdc2e67b]:not(.btn-disabled):active{color:#6a4dde;border-color:#6a4dde}.btn-primary.btn-ghost:not(.btn-disabled) .btn-icon[data-v-bdc2e67b] svg{transition:color .2s cubic-bezier(.645,.045,.355,1)}.btn-danger.btn-ghost[data-v-bdc2e67b]:not(.btn-disabled){color:#ff4d4f;border-color:#ff4d4f;background-color:transparent}.btn-danger.btn-ghost[data-v-bdc2e67b]:not(.btn-disabled):hover{color:#ff7875;border-color:#ff7875}.btn-danger.btn-ghost[data-v-bdc2e67b]:not(.btn-disabled):active{color:#d9363e;border-color:#d9363e}.btn-danger.btn-ghost:not(.btn-disabled) .btn-icon[data-v-bdc2e67b] svg{transition:color .2s cubic-bezier(.645,.045,.355,1)}.btn-block[data-v-bdc2e67b]{width:100%}.btn-disabled[data-v-bdc2e67b]{color:#00000040;cursor:not-allowed}.btn-disabled[data-v-bdc2e67b]:not(.btn-text,.btn-link){border-color:#d9d9d9;background-color:#0000000a}.btn-disabled[data-v-bdc2e67b]:not(.btn-text,.btn-link):hover,.btn-disabled[data-v-bdc2e67b]:not(.btn-text,.btn-link):active{border-color:#d9d9d9;color:#00000040!important;background-color:#0000000a}.btn-disabled.btn-text[data-v-bdc2e67b]:hover,.btn-disabled.btn-text[data-v-bdc2e67b]:active{background-color:transparent}.btn-disabled.btn-link[data-v-bdc2e67b]:hover,.btn-disabled.btn-link[data-v-bdc2e67b]:active{color:#00000040}