EDIT to match new requirements.
You can use the “following sibling” selector to check if a button follows a checked checkbox.
button {
display: none;
}
.btn1:checked ~ #btn1,
.btn2:checked ~ #btn2 {
display: block;
}<input type="checkbox" class="btn1">
<input type="checkbox" class="btn1 btn2">
<input type="checkbox" class="btn2">
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>This is super sensitive to the HTML structure. It’s easy if the checkboxes and the button are siblings, but if there’s different levels, it becomes harder, or impossible. A JavaScript solution doesn’t care about the structure too much:
const buttons = Array.from(document.querySelectorAll('button'));
Array.from(document.querySelectorAll('input[type="checkbox"]'));
function setButton(button, visible) {
button.style.display = visible ? "inline" : "none";
}
document.querySelector('div').addEventListener('click', evt => {
if (evt.target.matches('input[type="checkbox"]')) {
buttons.forEach(button => {
let selector = button.getAttribute('data-cb');
let checkboxes = Array.from(document.querySelectorAll(selector));
let someChecked = checkboxes.some(e => e.checked);
setButton(button, someChecked);
});
}
});
buttons.forEach(button => setButton(button, false));<div>
<input type="checkbox" id="cb1">
<input type="checkbox" id="cb2">
<input type="checkbox" id="cb3">
<button data-cb="#cb1,#cb2">btn1</button>
<button data-cb="#cb2,#cb3">btn2</button>
</div>