btn-outline-warning

bootstrap5.css

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

bootstrap5.css

.btn-outline-warning:hover {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

bootstrap5.css

.btn-outline-warning:focus,
.btn-outline-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

bootstrap5.css

.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}

bootstrap5.css

.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

bootstrap5.css

.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

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>