Depressed Buttons :(

Hello Roll20 Community! I've been trying to figure out how to change an (action) button to take on a depressed look...no not in a need some Prozac way, but to look like the button remains depressed when clicked on.  After reading up on CSS and a lot of trial and error, I'm of the mind now that the only way to achieve this is with hacky checkbox magic.  The legit button approach seems like it would be much cleaner and easier, just can't seem to make it work.  I've also tried using a CSS button with no love.  Why does Roll20 hate me?! Examples of may vain and vexing attempts: CSS: button.sheet-test { background: #ededed; padding: 10px 30px; border-radius: 3px; cursor: pointer; } button.sheet-test:active { background: #e5e5e5; -webkit-box-shadow: inset 0px 0px 5px #c1c1c1; -moz-box-shadow: inset 0px 0px 5px #c1c1c1; box-shadow: inset 0px 0px 5px #c1c1c1; outline: none; } HTML: <div><button type="action" class="sheet-test" name="act_test"><span>Test</span></div> The button clicks as per usual...just doesn't stay down!  :(

I suggest you check the sourcecode of the Pathfinder 2e sheet, pretty sure it had some action buttons change colors when "pressed".

Thank you Andreas!  I'll take a look.  Appreciate the suggestion.  :)

While you can style things like active, hover, and focus, for action buttons, those are temporary states.&nbsp; As soon as you click somewhere else on the sheet, the action button state goes back to it's normal state and style... Obviously you've discovered that as well. ;-( You might be better off just making a "fake" button.&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Styling_Checkboxes_and_Radio_Buttons" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Styling_Checkboxes_and_Radio_Buttons</a> &nbsp;(use the Old Checkbox / Radio example).&nbsp; You can still trigger sheetworkers and style the unchecked/checked state.

I would use an action button that sets a hidden attribute value to 0 (for unclicked) and 1 (for clicked). Then you can use CSS checking for the value of that hidden button, and style the button to look pressed when the value is 1.

Thanks Vince and GiGs.&nbsp; While examining the Pathdinder 2e sheet was very educational for me, in fact it was just today over lunch that I had my "ah-ha!" moment and understood what they did and how they achieved their behavior, but ultimately it is as you said, Vince, and not ultimately the effect I'm going for. Unfortunately, I really don't want to go the fake button route, either.&nbsp; I tried those in the last iteration of my sheet and it's just a mess to deal with trying to reposition the fake button since it doesn't align correctly from the onset. However, GiGs suggestion seems to be on the money.&nbsp; I want to be able to hold the pressed state and have that mean something, to the effect that if a player needs to make a stat roll involving more than one stat then they can press the stats to roll against and a sheet worker can average the selected stats to roll against.&nbsp; Game mechanics aside, I thought the depressed button approach would be the cleanest way to represent a set state.&nbsp; I am trying to design a minimalist sheet that is also intuitive.&nbsp; ;) Thanks again for all the suggestions.&nbsp; Very much appreciate you taking the time to respond.&nbsp; Have a great weekend guys!

GiGs always suggests the best answers, and "minimally intuitive" sounds like an excellent goal...&nbsp; Would love to see a working example when you get something worked out.&nbsp; I'm sure lot's of sheet's could benefit.&nbsp; Cheers