test-nut-ui/dist/esm/Button/style/style.css

<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>

.nut-button{position:relative;display:inline-block;flex-shrink:0;height:var(--nutui-button-default-height, 44px);box-sizing:border-box;margin:0;padding:0;width:var(--nutui-button-width, auto);line-height:var(--nutui-button-default-line-height, 44px);font-size:var(--nutui-button-default-font-size, var(--nsui-font-size-5, 16px));text-align:center;cursor:pointer;transition:opacity .2s;-webkit-appearance:none;user-select:none;touch-action:manipulation;color:var(--nutui-button-default-color, var(--nsui-gray-color-9, #262626));background:var(--nutui-button-default-bg-color, var(--nutui-gray-6, #ffffff));border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-default-border-color, var(--nsui-gray-color-5, #D9D9D9))}.nut-button .nut-button-text-left{margin-left:var(--nutui-button-text-icon-margin-left, 8px)}.nut-button .nut-button-text-right{margin-right:var(--nutui-button-text-icon-margin-left, 8px)}.nut-button:after{border:none}.nut-button:active{background-color:var(--nutui-button-default-active-bg-color, var(--nsui-gray-color-3, #F0F0F0))}.nut-button__warp{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:initial}.nut-button--loading:active,.nut-button--disabled:active{background-color:initial}.nut-button--solid{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-primary-background-color, var(--nutui-brand-color, #2C68FF));border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #2C68FF));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #2C68FF));background:transparent}.nut-button.nut-button--outline:active{background-color:var(--nutui-button-outline-active-bg-color, #DFE8FF)}.nut-button.nut-button--none{color:var(--nutui-button-none-color, var(--nsui-gray-color-9, #262626));background:transparent;border-color:transparent;font-size:var(--nutui-button-none-font-size, var(--nsui-font-size-6, 18px));padding:0;height:auto;line-height:unset;border-radius:0}.nut-button.nut-button--none .nut-button-text-left{margin-left:var(--nutui-button-none-text-icon-margin-left, 4px)}.nut-button.nut-button--none .nut-button-text-right{margin-right:var(--nutui-button-none-text-icon-margin-left, 4px)}.nut-button--primary{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-primary-background-color, var(--nutui-brand-color, #2C68FF));border:var(--nutui-button-border-primary-width, 0px) solid transparent}.nut-button--primary:active{background-color:var(--nutui-button-primary-active-bg-color, #1C4AD4)}.nut-button--primary.nut-button--plain{color:var(--nutui-button-primary-plain-color, var(--nutui-brand-color, #2C68FF));background:var(--nutui-button-primary-plain-background-color, #DFE8FF)}.nut-button--primary.nut-button--plain:active{background-color:var(--nutui-button-plain-active-bg-color, #A3C6FF)}.nut-button--primary.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #2C68FF));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #2C68FF));border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-primary-border-color, var(--nutui-brand-color, #2C68FF));background:transparent}.nut-button--primary.nut-button--none{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #2C68FF));background:transparent;border-color:transparent}.nut-button--info{color:var(--nutui-button-info-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(315deg,rgb(73,143,242) 0%,rgb(73,101,242) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--info.nut-button--outline{color:var(--nutui-button-info-border-color, #496af2);border-color:var(--nutui-button-info-border-color, #496af2);background:transparent}.nut-button--info.nut-button--none{color:var(--nutui-button-info-border-color, #496af2);background:transparent;border-color:transparent}.nut-button--success{color:var(--nutui-button-success-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-success-background-color, #0ED57D);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--success:active{background-color:var(--nutui-button-success-background-color, #0ED57D)}.nut-button--success.nut-button--outline{color:var(--nutui-button-success-border-color, #0ED57D);border-color:var(--nutui-button-success-border-color, #0ED57D);background:transparent}.nut-button--success.nut-button--outline:active{background-color:transparent}.nut-button--success.nut-button--none{color:var(--nutui-button-success-border-color, #0ED57D);background:transparent;border-color:transparent}.nut-button--success.nut-button--none:active{background-color:transparent}.nut-button--danger{color:var(--nutui-button-danger-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-danger-background-color, #FF2C33);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--danger:active{background-color:var(--nutui-button-danger-background-color, #FF2C33)}.nut-button--danger.nut-button--outline{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));border-color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));background:transparent}.nut-button--danger.nut-button--outline:active{background-color:transparent}.nut-button--danger.nut-button--none{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));background:transparent;border-color:transparent}.nut-button--danger.nut-button--none:active{background-color:transparent}.nut-button--warning{color:var(--nutui-button-warning-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-warning-background-color, #FFA02C);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--warning:active{background-color:var(--nutui-button-warning-background-color, #FFA02C)}.nut-button--warning.nut-button--outline{color:var(--nutui-button-warning-border-color, #FFA02C);border-color:var(--nutui-button-warning-border-color, #FFA02C);background:transparent}.nut-button--warning.nut-button--outline:active{background-color:transparent}.nut-button--warning.nut-button--none{color:var(--nutui-button-warning-border-color, #FFA02C);background:transparent;border-color:transparent}.nut-button--warning.nut-button--none:active{background-color:transparent}.nut-button--large{padding:var(--nutui-button-large-padding, 0 24px);height:var(--nutui-button-large-height, 50px);line-height:var(--nutui-button-large-line-height, 50px);font-size:var(--nutui-button-large-font-size, var(--nsui-font-size-6, 18px))!important}.nut-button--large .nut-button-text-left{margin-left:var(--nutui-button-text-icon-large-margin-left, 8px)}.nut-button--large .nut-button-text-right{margin-right:var(--nutui-button-text-icon-large-margin-left, 8px)}.nut-button--large .text{margin-left:var(--nutui-button-text-icon-large-margin-left, 8px)}.nut-button--large.nut-button--icon{padding:var(--nutui-button-large-icon-default-padding, 20px)}.nut-button--normal{padding:var(--nutui-button-default-padding, 0 24px);font-size:var(--nutui-button-default-font-size, var(--nsui-font-size-5, 16px))}.nut-button--normal.nut-button--icon{padding:var(--nutui-button-icon-default-padding, 20px)}.nut-button--small{height:var(--nutui-button-small-height, 32px);line-height:var(--nutui-button-small-line-height, 32px);padding:var(--nutui-button-small-padding, 0 16px);font-size:var(--nutui-button-small-font-size, var(--nsui-font-size-4, 14px))!important}.nut-button--small .nut-button-text-left{margin-left:var(--nutui-button-text-icon-small-margin-left, 4px)}.nut-button--small .nut-button-text-right{margin-right:var(--nutui-button-text-icon-small-margin-left, 4px)}.nut-button--small .text{margin-left:var(--nutui-button-text-icon-small-margin-left, 4px)}.nut-button--small.nut-button--icon{padding:var(--nutui-button-small-icon-default-padding, 12px)}.nut-button--mini{height:var(--nutui-button-mini-height, 24px);line-height:var(--nutui-button-mini-line-height, 24px);padding:var(--nutui-button-mini-padding, 0 12px);font-size:var(--nutui-button-mini-font-size, var(--nsui-font-size-2, 12px))!important}.nut-button--mini .nut-button-text-left{margin-left:var(--nutui-button-text-icon-mini-margin-left, 1px)}.nut-button--mini .nut-button-text-right{margin-right:var(--nutui-button-text-icon-mini-margin-left, 1px)}.nut-button--mini .text{margin-left:var(--nutui-button-text-icon-mini-margin-left, 1px)}.nut-button--mini.nut-button--icon{padding:var(--nutui-button-mini-icon-default-padding, 8px)}.nut-button--block{display:block;width:100%}.nut-button--disabled{cursor:not-allowed;opacity:var(--nutui-button-disabled-opacity, .68)}.nut-button--disabled.nut-button--default{opacity:1;border-color:var(--nutui-button-normal-disabled-border-color, var(--nsui-gray-color-4, #E5E5E5));color:var(--nutui-button-normal-disabled-color, var(--nsui-gray-color-6, #BFBFBF))}.nut-button--disabled.nut-button--default.nut-button--none{border:none}.nut-button--disabled.nut-button--primary{background:var(--nutui-button-primary-disabled-background-color, #A3C6FF);opacity:1}.nut-button--disabled.nut-button--primary.nut-button--none{border:none;background:transparent;color:var(--nutui-button-primary-disabled-outline-color, #A3C6FF)}.nut-button--disabled.nut-button--primary.nut-button--plain{background:var(--nutui-button-primary-plain-background-color, #DFE8FF);color:var(--nutui-button-primary-disabled-plain-color, #A3C6FF)}.nut-button--disabled.nut-button--primary.nut-button--outline{color:var(--nutui-button-primary-disabled-outline-color, #A3C6FF);border-color:var(--nutui-button-primary-disabled-outline-border-color, var(--nutui-button-primary-disabled-outline-color, #A3C6FF));background:transparent}.nut-button--loading{cursor:default;opacity:.9}.nut-button--round{border-radius:var(--nutui-button-border-radius, 25px)}.nut-button--square{border-radius:0}