btn-outline-warning

bootstrap5.css

bootstrap5.css
.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}
bootstrap5.css
.btn-outline-warning:hover {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}
bootstrap5.css
.btn-check:focus + .btn-outline-warning,
.btn-outline-warning:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}
bootstrap5.css
.btn-check:checked + .btn-outline-warning,
.btn-check:active + .btn-outline-warning,
.btn-outline-warning:active,
.btn-outline-warning.active,
.btn-outline-warning.dropdown-toggle.show {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}
bootstrap5.css
.btn-check:checked + .btn-outline-warning:focus,
.btn-check:active + .btn-outline-warning:focus,
.btn-outline-warning:active:focus,
.btn-outline-warning.active:focus,
.btn-outline-warning.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}
bootstrap5.css
.btn-outline-warning:disabled,
.btn-outline-warning.disabled {
  color: #ffc107;
  background-color: transparent;
}

html bootstrap5 Sample

アウトラインボタンの色:btn-outline-*


  <!-- 塗りつぶしがない -->
  <button class="btn btn-outline-primary">outline-primary</button>
  <button class="btn btn-outline-secondary">outline-secondary</button>
  <button class="btn btn-outline-success">outline-success</button>
  <button class="btn btn-outline-danger">outline-danger</button>
  <button class="btn btn-outline-warning">outline-warning</button>
  <button class="btn btn-outline-info">outline-info</button>
  <button class="btn btn-outline-light">outline-light</button>
  <button class="btn btn-outline-dark">outline-dark</button>