在按钮背景上应用两种颜色。

Question

我需要为我的按钮应用两种背景颜色。需要设计如下图所示的按钮。

请问这个设计是否可以使用纯CSS实现，或者请提供其他建议。

谢谢。

- user2681579

Answer 1

这可以通过使用linear-gradient来实现。

linear-gradient代表了四个参数：

1. <angle>。这是linear-gradient的起点，因此值为0deg等同于to top;。增加的值顺时针旋转。
2. color。它指示了linear-gradient的颜色，可以是rgb、rgba或hex。
3. <linear-color-stop>。这表示我们linear-gradient中颜色停止的位置（为了使其适应不同的width，应该使用百分比而不是原始数字）。
4. <color-hint>。这个参数指定了相邻颜色之间渐变的方式。所以每当设置为100%，就会出现一个硬线，在这个位置上渐变会更改（应该总是将它设置为最后一种颜色或单独指定颜色）。

linear-gradient(<angel>, color <linear-color-stop> <color-hint>)

你的最终代码应该像这样：

```html

你的最终代码应该像这样：

```

button {
  width: 200px;
  height: 50px;
  border: 1px solid rgba(40, 141, 211, 1);
  border-radius: 5px;
  background: linear-gradient(315deg, rgba(40, 141, 211, 1) 90%, rgba(255, 214, 103, 1) 10% 100%);
}

<button></button>

- SMAKSS

---

所有答案都是可行的解决方案，但接受此答案是因为它提供了解释。 - user2681579

Answer 2

使用这种干净简洁的方式：

当你需要一个倾斜的角度时，你需要在linear-gradient中使用角度。在你的情况下，它是在左上角，所以尝试一些不同的数字来得到你想要的效果。

可以使边框变粗或细，我已经根据图片选择了颜色和边框，并调整了按钮的宽度。

注意：如果你增加按钮的宽度，倾斜角度也会变化，因此你需要为此调整代码。这对所有在这里发布答案的人都适用。

.btn {
  width: 200px;
  height: 50px;
  background: linear-gradient(315deg, #278CD3 150px, #FFD667 90px, #FFD667 100%);
  border-radius: 7px;
  border: 1px solid #278CD3;
}

<button type="button" class="btn ">Button</button>

- Manjuboyz

---

这将在width更改时严重破坏。 - SMAKSS

根据OP的要求，考虑到基本按钮大小，我能够形成这个，可以通过改变角度轻松固定。 - Manjuboyz

Answer 3

你可以使用 CSS 渐变。

.btn{
background: rgb(241,157,6);
background: linear-gradient(133deg, rgba(241,157,6,1) 20%, rgba(9,9,121,1) 20%, rgba(9,9,121,1) 100%);
  color: white;
  border: none;
  padding: 10px 20px;
}

<button class="btn">hello</button>

- ZecKa

Answer 4

给你，复制品。

.btn {
    width:200px;
    height:50px;
    border-radius: 6px;
    border: 2px solid #278CD3;
    background: linear-gradient(315deg,#278CD3 150px, #FFD667 90px, #FFD667 100%);
    font-size:16px;
    color: #FFD667;
}

<button type="button" class="btn">Button</button>

- pixlboy

---

我在想我的代码和你的有什么区别？是2px的边框吗？ - Manjuboyz

边框半径和文本颜色，也许。 - pixlboy

Answer 5

更简单的解决方案是使用像这样的图像作为按钮的背景。

<button><img src="pic_trulli.jpg" width="30px" height= "30px"></button>

需要进行一些CSS调整，使图像适合按钮。

- Ajith

---

可以使用纯CSS实现... - ZecKa

是的，这是可能的。尝试类似于<button><img src="pic_trulli.jpg" width="30px" height= "30px"></button>的东西。 - Ajith

是的，但问题是使用纯CSS。我认为加载图像并不是一个好主意来实现这个功能... - ZecKa