btn-success

bootstrap5.css

.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

bootstrap5.css

.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

bootstrap5.css

.btn-success:focus,
.btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

bootstrap5.css

.btn-success.disabled,
.btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

bootstrap5.css

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

bootstrap5.css

.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

html bootstrap5 Sample

ボタンの色：btn-*

  <button type="button" class="btn btn-primary">btn-primary</button>
  <button type="button" class="btn btn-secondary">btn-secondary</button>
  <button type="button" class="btn btn-success">btn-success</button>
  <button type="button" class="btn btn-danger">btn-danger</button>
  <button type="button" class="btn btn-warning">btn-warning</button>
  <button type="button" class="btn btn-info">btn-info</button>
  <button type="button" class="btn btn-light">btn-light</button>
  <button type="button" class="btn btn-dark">btn-dark</button>
  <button type="button" class="btn btn-link">btn-link</button>