Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Depressed Buttons :(

1609980119

Edited 1609980201
John D.
Pro
Sheet Author
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!  :(
1610011352
Andreas J.
Forum Champion
Sheet Author
Translator
I suggest you check the sourcecode of the Pathfinder 2e sheet, pretty sure it had some action buttons change colors when "pressed".
1610042325
John D.
Pro
Sheet Author
Thank you Andreas!  I'll take a look.  Appreciate the suggestion.  :)
1610157444

Edited 1610157591
vÍnce
Pro
Sheet Author
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.
1610158037
GiGs
Pro
Sheet Author
API Scripter
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.
1610175215

Edited 1610175273
John D.
Pro
Sheet Author
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!
1610176401

Edited 1610176594
vÍnce
Pro
Sheet Author
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