@fesjs/fes-design/es/button/style/index.css

fes-design for PC

@keyframes waveEffect {
  100% {
    box-shadow: 0 0 0 6px var(--f-btn-wave-shadow-color);
  }
}
@keyframes fadeEffect {
  100% {
    opacity: 0;
  }
}
.fes-btn {
  --f-btn-color: var(--f-text-color);
  --f-btn-bg-color: var(--f-white);
  --f-btn-border-color: var(--f-border-color-base);
  --f-btn-hover-color: var(--f-hover-color-base);
  --f-btn-hover-color-light: var(--f-hover-color-base-light);
  --f-btn-active-color: var(--f-active-color);
  --f-btn-disabled-color: var(--f-disabled-color-base);
  --f-btn-border-width: var(--f-border-width-base);
  --f-btn-border-style: var(--f-border-style-base);
  --f-btn-border-radius: var(--f-border-radius-base);
  --f-btn-border-radius-sm: var(--f-border-radius-sm);
  --f-btn-font-size: var(--f-font-size-base);
  --f-btn-height: 32px;
  --f-btn-padding: 0 16px;
  --f-btn-min-width: 60px;
  margin: 0;
  padding: 0;
  color: var(--f-text-color);
  font-size: var(--f-font-size-base);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  font-variant: tabular-nums;
  line-height: 22px;
  font-feature-settings: 'tnum';
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--f-btn-min-width);
  height: var(--f-btn-height);
  padding: var(--f-btn-padding);
  color: var(--f-btn-color);
  font-weight: 400;
  font-size: var(--f-btn-font-size);
  white-space: nowrap;
  vertical-align: middle;
  background: var(--f-btn-bg-color);
  border: var(--f-btn-border-width) var(--f-btn-border-style) transparent;
  border-color: var(--f-btn-border-color);
  border-radius: var(--f-btn-border-radius);
  outline: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: manipulation;
}
.fes-btn[disabled] {
  text-shadow: none;
  box-shadow: none;
  cursor: not-allowed;
}
.fes-btn[disabled] > * {
  pointer-events: none;
}
.fes-btn-type-default {
  --f-btn-wave-shadow-color: var(--f-primary-color);
}
.fes-btn-type-default.is-animate::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--f-btn-wave-shadow-color);
  opacity: 0.2;
  animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-fill-mode: forwards;
  content: '';
  pointer-events: none;
}
.fes-btn-type-default:hover,
.fes-btn-type-default:focus {
  --f-btn-color: var(--f-primary-color);
  --f-btn-bg-color: var(--f-btn-hover-color-light);
  --f-btn-border-color: var(--f-primary-color);
}
.fes-btn-type-default:active {
  --f-btn-color: var(--f-btn-active-color);
  --f-btn-bg-color: var(--f-btn-hover-color-light);
  --f-btn-border-color: var(--f-btn-active-color);
}
.fes-btn-type-default[disabled] {
  --f-btn-color: var(--f-btn-disabled-color);
  --f-btn-bg-color: var(--f-disabled-color-light);
  --f-btn-border-color: var(--f-btn-disabled-color);
}
.fes-btn-type-default.is-loading,
.fes-btn-type-default.is-loading:hover,
.fes-btn-type-default.is-loading:focus,
.fes-btn-type-default.is-loading:active {
  text-shadow: none;
  box-shadow: none;
  opacity: 0.6;
  pointer-events: none;
}
.fes-btn-type-primary {
  --f-btn-wave-shadow-color: var(--f-primary-color);
  --f-btn-color: var(--f-white);
  --f-btn-bg-color: var(--f-primary-color);
  --f-btn-border-color: var(--f-primary-color);
}
.fes-btn-type-primary:hover,
.fes-btn-type-primary:focus {
  --f-btn-bg-color: var(--f-btn-hover-color);
  --f-btn-border-color: var(--f-btn-hover-color);
}
.fes-btn-type-primary:active {
  --f-btn-bg-color: var(--f-btn-active-color);
  --f-btn-border-color: var(--f-btn-active-color);
}
.fes-btn-type-primary[disabled] {
  --f-btn-bg-color: var(--f-btn-disabled-color);
  --f-btn-border-color: transparent;
}
.fes-btn-type-primary.is-loading,
.fes-btn-type-primary.is-loading:hover,
.fes-btn-type-primary.is-loading:focus,
.fes-btn-type-primary.is-loading:active {
  text-shadow: none;
  box-shadow: none;
  opacity: 0.6;
  pointer-events: none;
}
.fes-btn-type-primary.is-animate::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--f-btn-wave-shadow-color);
  opacity: 0.2;
  animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-fill-mode: forwards;
  content: '';
  pointer-events: none;
}
.fes-btn-type-text {
  --f-btn-color: var(--f-text-color);
  --f-btn-bg-color: transparent;
  --f-btn-border-color: transparent;
}
.fes-btn-type-text:hover,
.fes-btn-type-text:focus {
  --f-btn-color: var(--f-primary-color);
  --f-btn-bg-color: var(--f-hover-color-light);
}
.fes-btn-type-text:active {
  --f-btn-color: var(--f-active-color);
  --f-btn-bg-color: var(--f-hover-color-light);
}
.fes-btn-type-text[disabled] {
  --f-btn-color: var(--f-disabled-color-base);
  --f-btn-bg-color: transparent;
}
.fes-btn-type-text.is-loading,
.fes-btn-type-text.is-loading:hover,
.fes-btn-type-text.is-loading:focus,
.fes-btn-type-text.is-loading:active {
  text-shadow: none;
  box-shadow: none;
  opacity: 0.6;
  pointer-events: none;
}
.fes-btn-type-link {
  --f-btn-color: var(--f-primary-color);
  --f-btn-bg-color: transparent;
  --f-btn-border-color: transparent;
}
.fes-btn-type-link:hover,
.fes-btn-type-link:focus {
  --f-btn-color: var(--f-hover-color-base);
}
.fes-btn-type-link:active {
  --f-btn-color: var(--f-active-color);
}
.fes-btn-type-link[disabled] {
  --f-btn-color: var(--f-disabled-color-base);
}
.fes-btn-type-link.is-loading,
.fes-btn-type-link.is-loading:hover,
.fes-btn-type-link.is-loading:focus,
.fes-btn-type-link.is-loading:active {
  text-shadow: none;
  box-shadow: none;
  opacity: 0.6;
  pointer-events: none;
}
.fes-btn-type-info[disabled],
.fes-btn-type-success[disabled],
.fes-btn-type-warning[disabled],
.fes-btn-type-danger[disabled] {
  --f-btn-color: var(--f-btn-disabled-color);
  --f-btn-bg-color: var(--f-disabled-color-light);
  --f-btn-border-color: var(--f-btn-disabled-color);
}
.fes-btn-type-info.is-loading,
.fes-btn-type-success.is-loading,
.fes-btn-type-warning.is-loading,
.fes-btn-type-danger.is-loading,
.fes-btn-type-info.is-loading:hover,
.fes-btn-type-success.is-loading:hover,
.fes-btn-type-warning.is-loading:hover,
.fes-btn-type-danger.is-loading:hover,
.fes-btn-type-info.is-loading:focus,
.fes-btn-type-success.is-loading:focus,
.fes-btn-type-warning.is-loading:focus,
.fes-btn-type-danger.is-loading:focus,
.fes-btn-type-info.is-loading:active,
.fes-btn-type-success.is-loading:active,
.fes-btn-type-warning.is-loading:active,
.fes-btn-type-danger.is-loading:active {
  text-shadow: none;
  box-shadow: none;
  opacity: 0.6;
  pointer-events: none;
}
.fes-btn-type-info {
  --f-btn-color: var(--f-primary-color);
  --f-btn-bg-color: var(--f-white);
  --f-btn-border-color: var(--f-primary-color);
  --f-btn-wave-shadow-color: var(--f-primary-color);
}
.fes-btn-type-info:hover,
.fes-btn-type-info:focus {
  --f-btn-bg-color: var(--f-hover-color-light);
}
.fes-btn-type-info:active {
  --f-btn-color: var(--f-active-color);
  --f-btn-bg-color: var(--f-hover-color-light);
  --f-btn-border-color: var(--f-active-color);
}
.fes-btn-type-info.is-animate::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--f-btn-wave-shadow-color);
  opacity: 0.2;
  animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-fill-mode: forwards;
  content: '';
  pointer-events: none;
}
.fes-btn-type-success {
  --f-btn-color: var(--f-success-color);
  --f-btn-bg-color: var(--f-white);
  --f-btn-border-color: var(--f-success-color);
  --f-btn-wave-shadow-color: var(--f-success-color);
}
.fes-btn-type-success:hover,
.fes-btn-type-success:focus {
  --f-btn-bg-color: var(--f-hover-success-color);
}
.fes-btn-type-success:active {
  --f-btn-color: var(--f-active-success-color);
  --f-btn-bg-color: var(--f-hover-success-color);
  --f-btn-border-color: var(--f-success-active-color);
}
.fes-btn-type-success.is-animate::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--f-btn-wave-shadow-color);
  opacity: 0.2;
  animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-fill-mode: forwards;
  content: '';
  pointer-events: none;
}
.fes-btn-type-warning {
  --f-btn-color: var(--f-warning-color);
  --f-btn-bg-color: var(--f-white);
  --f-btn-border-color: var(--f-warning-color);
  --f-btn-wave-shadow-color: var(--f-warning-color);
}
.fes-btn-type-warning:hover,
.fes-btn-type-warning:focus {
  --f-btn-bg-color: var(--f-hover-warning-color);
}
.fes-btn-type-warning:active {
  --f-btn-color: var(--f-active-warning-color);
  --f-btn-bg-color: var(--f-hover-warning-color);
  --f-btn-border-color: var(--f-warning-active-color);
}
.fes-btn-type-warning.is-animate::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--f-btn-wave-shadow-color);
  opacity: 0.2;
  animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-fill-mode: forwards;
  content: '';
  pointer-events: none;
}
.fes-btn-type-danger {
  --f-btn-color: var(--f-danger-color);
  --f-btn-bg-color: var(--f-white);
  --f-btn-border-color: var(--f-danger-color);
  --f-btn-wave-shadow-color: var(--f-danger-color);
}
.fes-btn-type-danger:hover,
.fes-btn-type-danger:focus {
  --f-btn-bg-color: var(--f-hover-danger-color);
}
.fes-btn-type-danger:active {
  --f-btn-color: var(--f-active-danger-color);
  --f-btn-bg-color: var(--f-hover-danger-color);
  --f-btn-border-color: var(--f-danger-active-color);
}
.fes-btn-type-danger.is-animate::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--f-btn-wave-shadow-color);
  opacity: 0.2;
  animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-fill-mode: forwards;
  content: '';
  pointer-events: none;
}
.fes-btn-long {
  width: 100%;
}
.fes-btn-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}
.fes-btn-icon.is-right {
  margin-right: 0;
  margin-left: 4px;
}
.fes-btn-large {
  --f-btn-min-width: 75px;
  --f-btn-height: 40px;
  --f-btn-font-size: calc(var(--f-font-size-base) + 2px);
}
.fes-btn-small {
  --f-btn-min-width: 40px;
  --f-btn-height: 24px;
  --f-btn-padding: 0 12px;
  --f-btn-font-size: calc(var(--f-font-size-base) - 2px);
  --f-btn-border-radius: var(--f-btn-border-radius-sm);
}