Link all buttons to a class in CSS? - css

Question

I'm using Bootstrap and I want to link all button elements to have the same CSS properties as the btn and btn-primary classes.
How can this be achieved? Thanks!

Answer 1

You can adjust the button element itself and copy the CSS properties over from the .btn and .btn-primary.
button {
display: inline-block;
font-weight: 400;
color: #858796;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.35rem;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
color: #fff;
background-color: #075b8f;
border-color: #075b8f;
}
button:hover {
color: #fff;
background-color: #0773b1;
border-color: #0773b1;
cursor: pointer;
}
button:focus, button.focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(105, 136, 228, 0.5);
box-shadow: 0 0 0 0.2rem rgba(105, 136, 228, 0.5);
}
<button>Click me</button>

Answer 2

If you do not want to write CSS values for the button element itself, you will need to use JavaScript to apply a class on each button element:
[...document.querySelectorAll('button')].forEach(button => {
button.classList.add("btn-primary");
button.classList.add("btn");
})
.btn, .btn-primary {
color:red;
}
<button>test</button>
<button>test2</button>