how to seperate my button to two diffrent colors

Question

I have a button like the following:

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 want upper part of my button to be red,as you see in my code I gave my span 100% but still has not filled the whole of upper part of 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>

the jQuery in the fiddle is different than the one posted here. Why is that? — N. Ivanov, Mar 13 '18 at 09:11

score 4 · Accepted Answer · answered Mar 13 '18 at 09:14

4

You don't need no js or anything else weird to do this, just use css :

.Btns {
  width:200px;
  height:75px;
  background:linear-gradient(to bottom, red, red 50%,  lightblue 50%, lightblue);
  color:black;
  font-weight:bold;
}

answered Mar 13 '18 at 09:14

kevinniel

1,088
1
6
14

no need this long syntax simply write this `linear-gradient(red 50%, lightblue 0)` – Temani Afif Mar 13 '18 at 09:18

how to seperate my button to two diffrent colors

1 Answers1