ou also have the hidden input, correct?
I was missing ".charsheet" in the first line of the css (I've updated the example), but that shouldn't have really caused an issue. You might post an example of your code, since the css might need to be adjusted depending on how your html written.
I added your two buttons as well and it works in my test;
.charsheet .sheet-block-a,
.charsheet .sheet-block-switch:checked ~ .sheet-block-b {
display: block;
}
.charsheet .sheet-block-b,
.charsheet .sheet-block-switch:checked ~ .sheet-block-a {
display: none;
}
<div>
<span>Use API:</span>
<input type="checkbox" class="sheet-block-switch" name="attr_block_switch" value="1">
<button type="roll" name="roll_something" class="sheet-block-a" value="[[1d20 + @{selected|melee-mod}]]">Roll</button>
<button type="roll" name="roll_something_api" class="sheet-block-b" value="!script {{
--#title| Melee Attack
--=Roll|1d20 + @{selected|melee-mod}
--*GMLine|@{selected|token_name} rolled a [$Roll]}}">API
</button>
<button class="sheet-block-b" title="Rolls Athletics" type='roll' name='roll_athleticsApi' value='!some text'>API</button>
<button class="sheet-block-a" type="roll" title="Non-API Athletics Roll" value="&{template:stuff} {{name=@{character_name}}} {{Rollname=Athletics}} {{NormalSuccesses=a bunch of text}}" name="roll_athleticsInlineDice">Roll</button>
</div>