アウトラインボタンサンプル集

<button class="btn btn-outline-primary">プライマリ</button>
<button class="btn btn-outline-secondary">セカンダリ</button>
<button class="btn btn-outline-success">成功</button>
<button class="btn btn-outline-danger">危険</button>
<button class="btn btn-outline-warning">警告</button>
<button class="btn btn-outline-info">情報</button>
<button class="btn btn-outline-light">ライト</button>
<button class="btn btn-outline-dark">ダーク</button>

/* 基本ボタンスタイル */
.btn {
  display: inline-block;
  padding: 8px 16px;
  margin: 4px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
}


/* アウトラインプライマリボタン */
.btn-outline-primary {
  color: #007bff;
  background-color: transparent;
  border-color: #007bff;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

/* アウトラインセカンダリボタン */
.btn-outline-secondary {
  color: #6c757d;
  background-color: transparent;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

/* アウトライン成功ボタン */
.btn-outline-success {
  color: #28a745;
  background-color: transparent;
  border-color: #28a745;
}

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

/* アウトライン危険ボタン */
.btn-outline-danger {
  color: #dc3545;
  background-color: transparent;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

/* アウトライン警告ボタン */
.btn-outline-warning {
  color: #ffc107;
  background-color: transparent;
  border-color: #ffc107;
}

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

/* アウトライン情報ボタン */
.btn-outline-info {
  color: #17a2b8;
  background-color: transparent;
  border-color: #17a2b8;
}

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

/* アウトラインライトボタン */
.btn-outline-light {
  color: #dddddd;
  background-color: transparent;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #41464b;
  background-color: #f8f9fa;
  border-color: #41464b;
}

/* アウトラインダークボタン */
.btn-outline-dark {
  color: #343a40;
  background-color: transparent;
  border-color: #343a40;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}