html - 带渐变外边框的按钮

Question

如何在 CSS 中实现 元素的下一步？

Image1

我设法做了这样的事情:

https://jsfiddle.net/25abxak1/

-- 首先，我需要内容更宽，其次，我希望第一种颜色超出边框，就像图片中那样。

我是 CSS 的初学者，我真的需要帮助。

谢谢

Answer 1

可以在a上使用display: inline-block，黑色部分可以使用:before伪元素。您还应该将 a 上的 padding-left 设置为 width of :before + padding-right 以便文本居中。

a {
  color: #C46439;
  background: none;
  border-radius: 10px;
  border: 1px solid #D2D1D1;
  position: relative;
  overflow: hidden;
  padding: 10px 30px;
  padding-left: 70px;
  display: inline-block;
  text-decoration: none;
}
a:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 40px;
  background: black;
}

<a href="#">Centered text</a>

您还可以使用 linear-gradient 并将黑色部分设置为 20% 或类似值。

a {
  color: #C46439;
  background: linear-gradient(to right, black 0%, black 20%, white 20%, white 100%);
  border-radius: 10px;
  border: 1px solid #D2D1D1;
  position: relative;
  overflow: hidden;
  padding: 10px 30px;
  padding-left: 70px;
  display: inline-block;
  text-decoration: none;
}

<a href="#">Centered text</a>