Here is a button example with CSS styling:
CSS
.Btns {
width:200px;
height:75px;
background-color:lightblue;
color:black;
font-weight:bold;
}
HTML:
<button id="btnProduct" type="button" class="Btns" >
JQUERY:
$("#btnProduct").html('<span style="background-color:red;width:100px">Production:</span></br></br><span class="blue">55</span>');
I am trying to make the top part of my button red by using jQuery. However, even though I have set the span width to 100%, it still does not fill the entire upper area of the button.
$("#btnProduct").html('<span style="background-color:red;width:100px">Production:</span></br></br><span class="blue">55</span>');.Btns {
width: 200px;
height: 75px;
background-color: lightblue;
color: black;
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnProduct" type="button" class="Btns">
</button>