Custom Sheet

So I was wondering how to change the background color on a button, the background of text and all that is working properly, so is the button in preview, but in the actual sheet (where it matters) the button still appears solid white, the border is rendering properly but then the button fills itself with white instead of the red that it should be getting told to. 

This is all controlled by CSS.  Copy the sheet into a copy of your game and study CSS.  

Can you share the sheet code, and show exactly what you attempted to do? We can't see what's wrong with your car unless you let us take a look. If you used the correct background-color in your CSS and it didn't work, it's possible you defined incorrectly what roll buttons should get that change, or there is some other CSS that have higher priority and overrides your attempted changes. A more advanced you could do is to check out the chrome/firefox browser dev tools, they are great for exactly this kind of stuff.

<div class="sheet-colright"> <h3 data="characteristics">Statistics------------------------------Base/Temp/RollMod</h3> <div class="sheet-characteristics"> <!-- Left Column (Characteristics) --> <!-- Strength --> <div class="sheet-2colrow"> <div class="sheet-colattribute"> <button class ="button" name="roll_STR" type="roll" value="/em rolls a Strength Test: [[[[floor(((@{Strength}+@{TempSTR}+10)+@{RMODSTR})/10)]]d10>@{SuccessThreshold}!]]."> <span data="strength">Strength</span> </button> <div class="sheet-unnatural_box"> <input name="attr_strength" id="strength" width="30%"type="number" value="0"> <input name="attr_TempSTR" id="TempSTR" width="30%" type="number" value="0"> <input name="attr_RMODSTR" id="RMODSTR" width="30%" type="number" value="0"> </div> </div> </div> .sheet-button { background-color: #ca352b; border-radius: 8px; border: 2px solid #c3a341; text: center; width: 100px; height: 50px; } The current set, it produces the border it is told to, but does not impact the actual background of the button the left is what it should look like, the right is the problem at the moment

That might be a specificity issue. When you apply CSS to something, and it doesnt take, the first thing to try is to add some more matching descriptors. That button is inside several divs each with their own class, and all tags in roll20 sheets are inside the .charsheet class. So in an extreme situation you can do this .charsheet div.sheet-colright div.sheet-characteristics div.sheet-2colrow div.sheet-colattribute button.sheet-button { background-color: #ca352b; border-radius: 8px; border: 2px solid #c3a341; text: center; width: 100px; height: 50px; } Roll20 applies some styles to tags, and if their style is more specific (has more matching descriptors like the above) it will override any style you apply. To beat that, you have to apply more specific rules: the above rule, going from right to left, targets a button of class sheet-button, which is inside a div with class sheet-colattribute, which is inside another div with class sheet-2colrow, which is inside.... and so on up to .charsheet. If this is your issue, you wont need all these, you can delete some of them. For instance, this might work: .charsheet div.sheet-colright button.sheet-button { or even .charsheet div button.sheet-button { That might be specific enough to override roll20's inbuilt styles, and also match any appropriate button on your sheet.