btn-info

bootstrap5.css

.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

bootstrap5.css

.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

bootstrap5.css

.btn-info:focus,
.btn-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

bootstrap5.css

.btn-info.disabled,
.btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

bootstrap5.css

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #117a8b;
  border-color: #10707f;
}

bootstrap5.css

.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 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>