带渐变外边框的按钮

Question

如何在CSS中实现＆lt; a＆gt;元素？

Image1

我设法做了这样的事情：

https://jsfiddle.net/25abxak1/

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

我是CSS中的乞丐，我真的需要帮助。

谢谢

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;