Question

我有一个如下按钮：

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>');

我希望我的按钮的上半部分是红色的，正如你在我的代码中看到的那样，我给了我的跨度100％，但仍然没有填满整个按钮的上半部分。

＆＃13;

$("#btnProduct").html('<span style="background-color:red;width:100px">Production:</span></br></br><span class="blue">55</span>');

＆＃13;

.Btns {
  width: 200px;
  height: 75px;
  background-color: lightblue;
  color: black;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnProduct" type="button" class="Btns">
 
</button>

＆＃13;

Answer 1

你不需要任何js或其他任何奇怪的东西，只需使用css：

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

如何将我的按钮分成两种不同的颜色

1 个答案: