btn-outline-primary

bootstrap5.css

bootstrap5.css
.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
}
bootstrap5.css
.btn-outline-primary:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
bootstrap5.css
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
bootstrap5.css
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
bootstrap5.css
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
bootstrap5.css
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: #0d6efd;
  background-color: transparent;
}

html bootstrap5 Sample

js ナビバーbg-以外で背景色を直接指定:background-color


  <!-- navbar-*はテキストの色 -->
  <!-- navbar-expand-* は@mediaだったら適用するという指定 -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light" style="background-color: #e3f2fd;">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav9" aria-controls="Nav9"
        aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="Nav9">
        <ul class="navbar-nav me-auto">
          <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
        </ul>
        <form class="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
    </nav>

ボタン型のチェックボックス:btn-check


  <div class="form-check">
    <input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off" />
    <label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label>
    <input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off" />
    <label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label>
    <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked />
    <label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
    <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off" />
    <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
  </div>

アウトラインボタンの色: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>