如何将我的按钮分成两种不同的颜色[重复]答案

【问题标题】：how to seperate my button to two diffrent colors [duplicate]如何将我的按钮分成两种不同的颜色[重复]
【发布时间】：2018-08-21 11:16:19
【问题描述】：

我有一个类似下面的按钮：

CSS

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

    }

HTML：

<button id="btnProduct" type="button" class="Btns" >

查询：

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

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

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

.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>

【问题讨论】：

小提琴中的 jQuery 与此处发布的不同。这是为什么呢？

标签： css

【解决方案1】：

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

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

【讨论】：

不需要这么长的语法只需写这个linear-gradient(red 50%, lightblue 0)