lolita-style/src/conponent/_button.scss

.btn, btn:hover {
  margin: 0 2px;
  border: 2px solid;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: $black1;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  border-left-color: $white1;
  border-top-color: $white1;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover {
  color: $black1;
  text-decoration: none;
  border-left-color: $grey3;
  border-top-color: $grey3;
}

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn.disabled, .btn:disabled { opacity: 0.65; }
.btn:not(:disabled):not(.disabled) { cursor: pointer; }
a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; }
.btn-lg, .btn-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }
.btn-sm, .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 0.5rem; }
input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; }

.btn-fumei, .btn-fumei.disabled, .btn-fumei:disabled {
  background: radial-gradient(ellipse at top, $kawaii3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
  color: $white1;
  background-color: $kawaii2;
  border-bottom-color: $kawaii1;
  border-right-color: $kawaii1;
}

.btn-fumei:hover {
  color: $white1;
  background-color: $kawaii3;
  border-color: transparent;
  border-bottom-color: $kawaii2;
  border-right-color: $kawaii2;
}

.btn-fumei-check {
  color: $white1;
  background-color: $kawaii3;
  border-color: transparent;
  border-bottom-color: $kawaii2;
  border-right-color: $kawaii2;
  box-shadow: 0px 0px 7px 3px $kawaii2;
}

.btn-danshi, .btn-danshi.disabled, .btn-danshi:disabled {
  background: radial-gradient(ellipse at top, $dan2, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
  color: $white1;
  background-color: $white1;
  border-bottom-color: $dan1;
  border-right-color: $dan1;
}

.btn-danshi:hover {
  color: $white1;
  background-color: $dan4;
  border-color: transparent;
  border-bottom-color: $dan3;
  border-right-color: $dan3;
}

.btn-danshi-check {
  color: $white1;
  background-color: $dan4;
  border-color: transparent;
  border-bottom-color: $dan3;
  border-right-color: $dan3;
  box-shadow: 0px 0px 7px 3px $dan3;
}

.btn-joshi, .btn-joshi.disabled, .btn-joshi:disabled {
  background: radial-gradient(ellipse at top, $jo2, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
  color: $white1;
  background-color: $white1;
  border-bottom-color: $jo1;
  border-right-color: $jo1;
}

.btn-joshi:hover {
  color: $white1;
  background-color: $jo4;
  border-color: transparent;
  border-bottom-color: $jo3;
  border-right-color: $jo3;
}

.btn-joshi-check {
  color: $white1;
  background-color: $jo4;
  border-color: transparent;
  border-bottom-color: $jo3;
  border-right-color: $jo3;
  box-shadow: 0px 0px 7px 3px $jo3;
}

.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
  background: radial-gradient(ellipse at top, $suwa03, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
  color: $white1;
  border-bottom-color: $suwa00;
  border-right-color: $suwa00;
}

.btn-primary:hover {
  color: $white1;
  background-color: $suwa08;
  border-color: transparent;
  border-bottom-color: $suwa04;
  border-right-color: $suwa04;
}

.btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled {
  background: radial-gradient(ellipse at top, $grey3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
  color: $white1;
  border-bottom-color: $grey1;
  border-right-color: $grey1;
}

.btn-secondary:hover {
  color: $white1;
  background-color: $grey5;
  border-color: transparent;
  border-bottom-color: $grey2;
  border-right-color: $grey2;
}

.btn-success, .btn-success.disabled, .btn-success:disabled, .alert-success {
  background: radial-gradient(ellipse at top, $ok2, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
  color: $white1;
  border-bottom-color: $ok1;
  border-right-color: $ok1;
}

.btn-success:hover {
  color: $white1;
  background-color: $ok5;
  border-color: transparent;
  border-bottom-color: $ok4;
  border-right-color: $ok4;
}

.btn-danger, .btn-danger.disabled, .btn-danger:disabled, .alert-danger {
  background: radial-gradient(ellipse at top, $ng3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
  color: $white1;
  border-bottom-color: $ng1;
  border-right-color: $ng1;
}

.btn-danger:hover {
  color: $white1;
  background-color: $ng7;
  border-color: transparent;
  border-bottom-color: $ng3;
  border-right-color: $ng3;
}

.btn-warning, .btn-warning.disabled, .btn-warning:disabled, .alert-warning {
  background: radial-gradient(ellipse at top, $yellow3, transparent), radial-gradient(ellipse at bottom, $black1, transparent);
  color: $white1;
  border-bottom-color: $yellow1;
  border-right-color: $yellow1;
}

.btn-warning:hover {
  color: $white1;
  background-color: $yellow5;
  border-color: transparent;
  border-bottom-color: $yellow3;
  border-right-color: $yellow3;
}