CSS - 按钮边框渐变

Question

在广泛搜索后，我不知道如何在CSS中复制此按钮，特别是边框部分。如果可能，我需要将其用于其他元素。

设计的按钮

button.rounded-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1.125rem 2rem;
    
    position: absolute;
    width: 13.5919rem;
    height: 4.375rem;
    
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.7942rem);

    border-radius: 5.8652rem;
    border-image-slice: 1 1 0 0;
    border: 1px solid;
    border-image-source: linear-gradient(257.34deg, #FFFFFF 4.56%, rgba(255, 255, 255, 0) 29.19%);
    
    font-size: 1.25rem;
    line-height: 2.125rem;
    color: #fff;
}

body {
    background: #393939;
}

<!-- SVG Not included with the example -->
<button type="button" class="rounded-button">
  Watch video
  <!-- <img src="/assets/img/glyphs/ic-play.svg" alt="Watch video"> -->
</button>

理想情况下，我希望有一个可以应用于任何元素的类，以添加所需的效果，并且可以被撤销。我尝试过伪元素，如：after，但没有成功。

我真的不确定这是否可以在纯CSS中实现 ‍♂️

- Justin Erswell

---

很遗憾，您不能将 border-radius 与 border-image-source 结合使用：https://dev59.com/r7voa4cB1Zd3GeqP0EGX - Terry

@Terry 啊，我以为我很困难，谢谢你的提醒和解释链接。 - Justin Erswell

Answer 1

考虑使用一个隐藏在后面的 ::before。 这是我在不添加其他元素的情况下能够达到的最接近效果。

button.rounded-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    padding: 1rem 2.25rem;
    border-radius: 1000px;
    
    border: none;
    position: relative;
    background: #343434;
    
    font-size: 1.25rem;
    line-height: 2rem;
    color: #fff;
}
button.rounded-button::before {
    content: '';
    display: block;
    position: absolute;
    border-radius: 1000px;
    top: -0.1em;
    bottom: -0.1em;
    right: -0.1em;
    left: -0.1em;
    z-index: -1;
    background: linear-gradient(240deg, #ffffff 0%, #343434 25%);
}

body {
    background: #1d1d1d;
    padding: 2rem;
}

<button type="button" class="rounded-button">
  Watch video
</button>

然而，最好将按钮封装在::before 中，并使用z-index: -1来实现一些技巧。

奖励

接下来，您可以添加一些玻璃效果。

button.rounded-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    padding: 1rem 2.25rem;
    border-radius: 1000px;
    
    border: none;
    position: relative;
    background: #343434;
    
    font-size: 1.25rem;
    line-height: 2rem;
    color: #fff;
    cursor: pointer;
}
button.rounded-button::before {
    content: '';
    display: block;
    position: absolute;
    border-radius: 1000px;
    top: -0.1em;
    bottom: -0.1em;
    right: -0.1em;
    left: -0.1em;
    z-index: -1;
    background: linear-gradient(240deg, #343434 0%, #ffffff 20%, #343434 50%);
    background-size: 140%;
    background-position: 0 0;
    transition: background .3s;
}

button.rounded-button:hover::before {
    background-position: 100% 0;
    
}

body {
    background: #1d1d1d;
    padding: 2rem;
}

<button type="button" class="rounded-button">
  Watch video
</button>

- Newbie

Answer 2

你可以使用box-shadow在右侧应用边框效果：

box-shadow: 5px 0 1px -2px grey;

.rounded-button {
    box-shadow: 5px 0 1px -2px grey;
}



/* YOUR INITIAL CODE */
button.rounded-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1.125rem 2rem;
    
    position: absolute;
    width: 13.5919rem;
    height: 4.375rem;
    
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.7942rem);

    border-radius: 5.8652rem;
    border-image-slice: 1 1 0 0;
    border: 1px solid;
    border-image-source: linear-gradient(257.34deg, #FFFFFF 4.56%, rgba(255, 255, 255, 0) 29.19%);
    
    font-size: 1.25rem;
    line-height: 2.125rem;
    color: #fff;
}

body {
    background: #393939;
}

<button type="button" class="rounded-button">
  Watch video
</button>

- TerminalVelocity

---

谢谢你提供的建议，我之前没有考虑过阴影效果。使用你的方法，你觉得有办法实现渐变（从透明到白色再到透明）的效果吗？ - Justin Erswell

如果你知道按钮的背景颜色，那么这是可能的。你可以使用 #4D4D4D：box-shadow: inset 130px -1px 5px 0 #4D4D4D, inset -5px 3px 5px -5px white;。 也许最好使用 @Newbie 的方法来实现这个效果。 - TerminalVelocity