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

.btn {
  border-left-color: $white1;
  border-top-color: $white1;
}

.btn:hover {
  border-left-color: $grey3;
  border-top-color: $grey3;
}

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

.btn-cwgames:hover {
  color: $white1;
  background-color: $grey4;
  border-color: transparent;
  border-bottom-color: $black2;
  border-right-color: $black2;
}

.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;
}