Do you mean an effect just for when the button is clicked on, or a permanent style for the currently active button? I haven't written any sheets myself, but the 5e sheet uses radio inputs instead of button inputs to achieve the second option - radios have a 'checked' property to grab hold of with CSS. A really basic example: <!DOCTYPE html> <html> <head> <style> .tabs-nav:checked + span { color: red; } </style> </head> <body> <input id="sheet-tabselect1" class="tabs-nav" type="radio" name="sheet-tabselect" value="stats"><span> Stats</span><br> <input id="sheet-tabselect2" class="tabs-nav" type="radio" name="sheet-tabselect" value="inventory"><span> Inventory</span><br> <input id="sheet-tabselect3" class="tabs-nav" type="radio" name="sheet-tabselect" value="other"><span> Favourite Music</span> </body> <script> const tabs=['sheet-tabselect1','sheet-tabselect2','sheet-tabselect3']; tabs.forEach (tab => { document.getElementById(tab).addEventListener('click', (ev) => { console.log(ev.target.value); }) }) </script> </html> The Javascript at the end is not Roll20ified, you'd need to adjust it a little - use Roll20's event listener and a setAttrs instead of console logging the value, obviously. The Roll20 on('clicked:sheet-tabselect') will probably pick up all the radio buttons without needing to iterate through the ids... not sure on that though, and can't test it.
