Add btn-outline-*-inverse for dark backgrounds
Created by: IamManchanda
btn-outline-*
is a great option but adding inverse classes ( btn-outline-*-inverse
) will help buttons on dark backgrounds to be presented better
for eg.
btn-outline-primary-inverse {
color: #fff;
background-image: none;
background-color: transparent;
border-color: #fff;
}
.btn-outline-primary-inverse:hover {
color: #fff;
background-color: #0275d8;
border-color: #0275d8;
}
.btn-outline-primary-inverse:focus, .btn-outline-primary-inverse.focus {
color: #fff;
background-color: #0275d8;
border-color: #0275d8;
}
Adding some screenshots for the demo purposes