![Bootstrap Bootstrap](https://www.emawebdesign.com/blogdef/wp-content/uploads/2022/05/bootstrap.jpg)
Bootstrap 5: modificare i colori dei pulsanti (buttons)
Pubblicato il 3 Maggio 2022
Per modificare i colori in Bootstrap 5 possiamo agire sulle variabili Sass. Per effettuare una veloce modifica ai colori dei pulsanti possiamo agire sul seguente snippet CSS:
.btn-primary {
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
}
.btn-primary:hover {
color: #fff;
background-color: #0b5ed7;
border-color: #0a58ca;
}
.btn-check:focus + .btn-primary,
.btn-primary:focus {
color: #fff;
background-color: #0b5ed7;
border-color: #0a58ca;
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #0a58ca;
border-color: #0a53be;
}
.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-primary.disabled,
.btn-primary:disabled {
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
}
Related posts:
Pubblicato in: