tu-view-plus/es/src/button/style/button.css

.tu-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 9px 19px;
  background-color: var(--tu-color-global-bg, #dfe1e6);
  color: var(--tu-color-text, #71757f);
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  border: none;
  border-radius: var(--tu-border-radius, 2px);
  font-weight: var(--tu-font-content-weight, normal);
  font-size: var(--tu-font-size-medium, 14px);
  -webkit-appearance: none;
  transition: all var(--tu-transition-duration-2, 0.2s);
}
.tu-button.is-disabled, .tu-button.is-disabled:hover, .tu-button.is-disabled:focus {
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
}

.tu-button.is-round {
  border-radius: var(--tu-border-radius-full, 100px);
}
.tu-button.is-round::after {
  border-radius: var(--tu-border-radius-full, 100px);
}

.tu-button.is-circle {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
}
.tu-button.is-circle::after {
  border-radius: 50%;
}

.tu-button.is-long {
  display: flex;
  width: 100%;
}

.tu-button.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.tu-button--default {
  position: relative;
  box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0), -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.tu-button--default::after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  top: 0;
  left: 0;
  border: 1px solid transparent;
  border-radius: var(--tu-border-radius, 2px);
  transition: border var(--tu-transition-duration-2, 0.2s);
}
.tu-button--default:hover:not(.is-disabled, :active) {
  box-shadow: none;
}
.tu-button--default:hover:not(.is-disabled, :active)::after {
  border-color: var(--tu-color-shadow-light, #ffffff);
}
.tu-button--default:hover:not(.is-disabled, :active) > i {
  color: var(--tu-color-primary, #5e7ce0);
}
.tu-button--default:active {
  color: var(--tu-color-primary, #5e7ce0);
  transition: none;
  box-shadow: inset 2px 2px 5px var(--tu-color-shadow-dark, #babbc0), inset -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.tu-button--default.is-disabled {
  background-color: var(--tu-color-base-bg, rgba(128, 128, 128, 0.22));
}

.tu-button--primary {
  box-shadow: inset 2px 2px 8px var(--tu-color-primary-light, #96adfa), inset -2px -2px 8px var(--tu-color-primary-dark, #465eb8), 3px 3px 6px var(--tu-color-shadow-dark, #babbc0), -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
  background-color: var(--tu-color-primary, #5e7ce0);
  color: var(--tu-color-text-light, #eef0f5);
}
.tu-button--primary [class*=tu-icon] {
  color: var(--tu-color-text-light, #eef0f5);
}
.tu-button--primary:hover {
  box-shadow: none;
}
.tu-button--primary:hover,
.tu-button--primary:hover [class*=tu-icon] {
  color: var(--tu-color-white, #ffffff);
}
.tu-button--primary:active {
  transition: none;
  box-shadow: inset 3px 3px 8px var(--tu-color-primary-dark, #465eb8), inset -2px -3px 8px var(--tu-color-primary-light, #96adfa);
}

.tu-button--success {
  box-shadow: inset 2px 2px 8px var(--tu-color-success-light, #8be8cb), inset -2px -2px 8px var(--tu-color-success-dark, #27b080), 3px 3px 6px var(--tu-color-shadow-dark, #babbc0), -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
  background-color: var(--tu-color-success, #50d4ab);
  color: var(--tu-color-text-light, #eef0f5);
}
.tu-button--success [class*=tu-icon] {
  color: var(--tu-color-text-light, #eef0f5);
}
.tu-button--success:hover {
  box-shadow: none;
}
.tu-button--success:hover,
.tu-button--success:hover [class*=tu-icon] {
  color: var(--tu-color-white, #ffffff);
}
.tu-button--success:active {
  transition: none;
  box-shadow: inset 3px 3px 8px var(--tu-color-success-dark, #27b080), inset -2px -3px 8px var(--tu-color-success-light, #8be8cb);
}

.tu-button--warning {
  box-shadow: inset 2px 2px 8px var(--tu-color-warning-light, #ffbf85), inset -2px -2px 8px var(--tu-color-warning-dark, #cc6414), 3px 3px 6px var(--tu-color-shadow-dark, #babbc0), -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
  background-color: var(--tu-color-warning, #fa9841);
  color: var(--tu-color-text-light, #eef0f5);
}
.tu-button--warning [class*=tu-icon] {
  color: var(--tu-color-text-light, #eef0f5);
}
.tu-button--warning:hover {
  box-shadow: none;
}
.tu-button--warning:hover,
.tu-button--warning:hover [class*=tu-icon] {
  color: var(--tu-color-white, #ffffff);
}
.tu-button--warning:active {
  transition: none;
  box-shadow: inset 3px 3px 8px var(--tu-color-warning-dark, #cc6414), inset -2px -3px 8px var(--tu-color-warning-light, #ffbf85);
}

.tu-button--danger {
  box-shadow: inset 2px 2px 8px var(--tu-color-danger-light, #ffa4a1), inset -2px -2px 8px var(--tu-color-danger-dark, #c73636), 3px 3px 6px var(--tu-color-shadow-dark, #babbc0), -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
  background-color: var(--tu-color-danger, #f66f6a);
  color: var(--tu-color-text-light, #eef0f5);
}
.tu-button--danger [class*=tu-icon] {
  color: var(--tu-color-text-light, #eef0f5);
}
.tu-button--danger:hover {
  box-shadow: none;
}
.tu-button--danger:hover,
.tu-button--danger:hover [class*=tu-icon] {
  color: var(--tu-color-white, #ffffff);
}
.tu-button--danger:active {
  transition: none;
  box-shadow: inset 3px 3px 8px var(--tu-color-danger-dark, #c73636), inset -2px -3px 8px var(--tu-color-danger-light, #ffa4a1);
}

.tu-button--info {
  box-shadow: inset 2px 2px 8px var(--tu-color-info-light, #d1d1d1), inset -2px -2px 8px var(--tu-color-info-dark, #707070), 3px 3px 6px var(--tu-color-shadow-dark, #babbc0), -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
  background-color: var(--tu-color-info, #8a8a8a);
  color: var(--tu-color-text-light, #eef0f5);
}
.tu-button--info [class*=tu-icon] {
  color: var(--tu-color-text-light, #eef0f5);
}
.tu-button--info:hover {
  box-shadow: none;
}
.tu-button--info:hover,
.tu-button--info:hover [class*=tu-icon] {
  color: var(--tu-color-white, #ffffff);
}
.tu-button--info:active {
  transition: none;
  box-shadow: inset 3px 3px 8px var(--tu-color-info-dark, #707070), inset -2px -3px 8px var(--tu-color-info-light, #d1d1d1);
}

.tu-button--mini {
  font-size: var(--tu-font-size-mini, 10px);
  padding: 6px 9px;
}
.tu-button--mini [class*=tu-icon] {
  font-size: var(--tu-font-size-mini, 10px);
}
.tu-button--mini [class*=tu-icon] + span {
  margin-left: 2px;
}
.tu-button--mini.is-circle {
  width: 24px;
  height: 24px;
  font-size: var(--tu-font-size-mini, 10px);
  padding: 0;
  border-radius: 50%;
}

.tu-button--small {
  font-size: var(--tu-font-size-small, 12px);
  padding: 8px 13px;
}
.tu-button--small [class*=tu-icon] {
  font-size: var(--tu-font-size-small, 12px);
}
.tu-button--small [class*=tu-icon] + span {
  margin-left: 4px;
}
.tu-button--small.is-circle {
  width: 28px;
  height: 28px;
  font-size: var(--tu-font-size-small, 12px);
  padding: 0;
  border-radius: 50%;
}

.tu-button--medium {
  font-size: var(--tu-font-size-medium, 14px);
  padding: 9px 19px;
}
.tu-button--medium [class*=tu-icon] {
  font-size: var(--tu-font-size-medium, 14px);
}
.tu-button--medium [class*=tu-icon] + span {
  margin-left: 6px;
}
.tu-button--medium.is-circle {
  width: 32px;
  height: 32px;
  font-size: var(--tu-font-size-medium, 14px);
  padding: 0;
  border-radius: 50%;
}

.tu-button--large {
  font-size: var(--tu-font-size-large, 14px);
  padding: 11px 25px;
}
.tu-button--large [class*=tu-icon] {
  font-size: var(--tu-font-size-large, 14px);
}
.tu-button--large [class*=tu-icon] + span {
  margin-left: 8px;
}
.tu-button--large.is-circle {
  width: 36px;
  height: 36px;
  font-size: var(--tu-font-size-large, 14px);
  padding: 0;
  border-radius: 50%;
}

.tu-button--text {
  color: var(--tu-color-primary, #5e7ce0);
  padding-left: 0;
  padding-right: 0;
}
.tu-button--text:hover:not(.is-disabled) {
  color: var(--tu-color-primary-dark, #465eb8);
}
.tu-button--text:hover:not(.is-disabled) [class*=tu-icon] {
  color: var(--tu-color-primary-dark, #465eb8);
}
.tu-button--text [class*=tu-icon] {
  color: var(--tu-color-primary, #5e7ce0);
}

.tu-button + .tu-button {
  margin-left: 12px;
}
.tu-button [class*=tu-icon] {
  transition: color 0.2s;
}
.tu-button [class*=tu-icon] + span {
  margin-left: 6px;
}