button with state

Hey folks.&nbsp; It's me again.&nbsp; It's been a while since I've had an HTML/CSS question.&nbsp; I've learned a lot from previous questions, and the information available already, and I've built up a nice toolbox to work with.&nbsp; Currently I'm making some very satisfying sections using the repeating section feature.&nbsp; That said, I have found one obstacle. I'd like to create a button with a few properties It would be a horizontal rectangle, with a word or two inside it, much like the "Post Topic" button below, except without the checkmark. It would have two states, on and off, and it would store what state it is in. It would indicate what state it is in by what color it is. That's it.&nbsp; I don't need to tie any logic to it.&nbsp; It would really serve the same purpose as a checkbox.&nbsp; I just don't like the look of checkboxes.&nbsp; I'm not sure anyone does. I've looked for a way to do this in the Roll20 forums, but I haven't found one.&nbsp; The closest things I've found are on&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Checkbox_Example" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Checkbox_Example</a> , but I don't see any close enough to use. I've found some really fancy examples on the webernets, like the "Example 4 -Switch Slide Demo" on this page,&nbsp; <a href="https://www.htmllion.com/css3-toggle-switch-button.html" rel="nofollow">https://www.htmllion.com/css3-toggle-switch-button.html</a> .&nbsp; However, I haven't been able to get it to work on a Roll20 custom character sheet. If anyone has an idea of how to do this, I'd be interested to hear it.&nbsp; Thanks for reading. = )

The hidden checkbox/fake checkbox method is basically what you are looking for, you can dress it however you want, it doesn't have to look anywhere near a checkbox but the function is a checkbox.&nbsp; That shield in the top right? That's a checkbox that switches pages on this character sheet.&nbsp; input[type="checkbox"].sheet-tab-switch + span::before { content: ""; margin-left: 0px; position: absolute; top: -60px; right: -78px; height: 80px; width: 69px; background:none; background-image: url("<a href="https://i.imgur.com/AdsqEDV.png" rel="nofollow">https://i.imgur.com/AdsqEDV.png</a>"); background-size: contain; background-repeat: none; border: solid 0px; line-height: 14px; display: inline-block; vertical-align: middle; box-shadow: 0 0 0px #ccc; } Its simply an image that takes up the same space as the hidden checkbox.&nbsp;

Here is a quick mock up of a checkbox that looks like the Submit Post Button. &lt;!-- Checkbox HTML --&gt; &lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="checkbox" name="attr_checkbox_one" value="1" class="style-one" title="@{checkbox_one}" /&gt;&lt;span title="Post Topic"&gt;&lt;/span&gt; &lt;/div&gt; /* - - - - - STYLING CHECKBOX INPUTS ( SIMPLE CHECKBOX ) - - - - - */ input.sheet-style-one { width: 140px; height: 42px; cursor: pointer; z-index: 1; opacity: 0; } input.sheet-style-one + span::before { content: attr(title); color: white; border: solid 1px #02baf2; border-radius: 5px; text-align: center; display: inline-block; background: #02baf2; width: 140px; height: 42px; font-size: 20px; padding-top: 10px; margin-left: -140px; } input.sheet-style-one:checked + span::before { color: #ffffff; background: #4B0082; /* Indigo */ border: solid 1px #4B0082; /* Indigo */ border-radius: 5px; } Click on the Gif Above. Wes

Well that's brilliant!&nbsp; That's exactly what I'm looking for.&nbsp; Thank you very much = ).