具有渐变外部边框的按钮

Question

如何在CSS中将下一个东西实现为< a>元素？

Image1

我设法做这样的事情：

https://jsfiddle.net/25abxak1/

- 首先，我需要的内容，以更宽;第二，我想第一个颜色上面去了就像在图片中一样。

我是CSS的begginer，我真的需要帮助。

谢谢

Answer 1

您可以在a使用display: inline-block，以及黑色的部分，你可以使用:before伪元素。您还应该将padding-left设置为a至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>