btn-outline-secondary

bootstrap4.css

bootstrap4.css
.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}
bootstrap4.css
.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap4.css
.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
bootstrap4.css
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: #6c757d;
  background-color: transparent;
}
bootstrap4.css
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap4.css
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

html 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>