Skip to content

Instantly share code, notes, and snippets.

@UnSstrennen
Created June 6, 2020 15:38
Show Gist options
  • Save UnSstrennen/694a4f6e59eb11d8de9a30047cacee76 to your computer and use it in GitHub Desktop.
Save UnSstrennen/694a4f6e59eb11d8de9a30047cacee76 to your computer and use it in GitHub Desktop.
Bootstrap 4 button coloring on pure CSS
/*
Add this code AFTER importing bootstrap.
If you add that code to your CSS file, import that file AFTER bootstrap file.
Don't edit bootstrap source code, it's wierd and unkind :)
For defining box-shadows, just get rgb code of main color and write it as rgba with alpha paramenter 0.5
*/
.btn-primary {
background-color: #FF8A29;
border-color: #FF8A29;
}
.btn-primary:hover {
background-color: #E8581A;
border-color: #E8581A;
}
.btn-primary:focus, .btn-secondary.focus {
background-color: #E8581A;
border-color: #E8581A;
box-shadow: 0 0 0 0.2rem rgba(255, 138, 41, 0.5);
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show>.btn-secondary.dropdown-toggle {
background-color: #FF8A29;
border-color: #FF8A29;
}
.btn-secondary.disabled, .btn-secondary:disabled {
background-color: #FF8A29;
border-color: #FF8A29;
}
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
background-color: #FF8A29;
box-shadow: 0 0 0 0.2rem rgba(255, 138, 41, 0.5);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment