时间戳

首页 > 解决方案 > CSS按钮背景：2纯色无渐变

html - CSS按钮背景：2纯色无渐变

问题描述

尝试构建一个外观和工作方式如下的按钮（或文本框）：上半部分按钮背景为白色或透明，下半部分按钮背景为纯色。悬停时，橙色应变为蓝色（我可以悬停颜色）。颜色应该在文本后面。文本不应该改变颜色，只有“条”。 示例按钮

试过：

  1. 仅底部边框（+-10px 厚 + 颜色），白色按钮背景 - 但似乎无法在边框上设置负值，以便文本位于颜色前面。
  2. 使用Ultimate CSS Gradient Generator并将渐变操作为实体，它在网站上工作，但我不认为这是可持续的（对于一个简单的函数来说代码太多）。

请帮忙。

标签： htmlcss

解决方案

我已经使用绝对定位的伪元素来实现您想要的结果

ps：

如果您希望它透明，则该::before元素不是必需的，但如果您想要 2 种颜色，则可以使用它

button {
  background: none;
  border: none;
  position: relative;
}

button span {
  position: relative;
  z-index: 2;
}

button::before,
button::after {
  content: "";
  position: absolute;
  left: 0;
  height: 50%;
  width: 100%;
}

button::before {
  top: 0;
  background-color: transparent;
}

button::after {
  bottom: 0;
  background-color: orange;
}

button:hover::after {
  background-color: blue;
}
<button>
  <span>BUTTON</span>
</button>

推荐阅读