btn-outline-secondary
bootstrap5.css
bootstrap5.css
.btn-outline-secondary {
color: #6c757d;
border-color: #6c757d;
}
bootstrap5.css
.btn-outline-secondary:hover {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
bootstrap5.css
.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
bootstrap5.css
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
color: #6c757d;
background-color: transparent;
}
bootstrap5.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;
}
bootstrap5.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 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>