CSS - 按钮边框渐变

Question

经过广泛搜索后，我陷入了如何在 CSS 中复制此按钮的问题，特别是边框，因为如果可能的话，我将在其他元素上使用它。

\n

设计好的按钮

\n

\n

\r\n

\r\n

button.rounded-button {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 1.125rem 2rem;\n    \n    position: absolute;\n    width: 13.5919rem;\n    height: 4.375rem;\n    \n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(0.7942rem);\n\n    border-radius: 5.8652rem;\n    border-image-slice: 1 1 0 0;\n    border: 1px solid;\n    border-image-source: linear-gradient(257.34deg, #FFFFFF 4.56%, rgba(255, 255, 255, 0) 29.19%);\n    \n    font-size: 1.25rem;\n    line-height: 2.125rem;\n    color: #fff;\n}\n\nbody {\n    background: #393939;\n}

\r\n

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

\r\n

\r\n

\r\n

\n

理想情况下，我希望有一个可以应用于任何元素的类，该类可以添加所需的效果并且可以反转，我尝试过伪元素，例如 :after 但没有任何乐趣

\n

我真的不确定这是否可以在纯css \xe2\x80\x8d\xe2\x99\x82\xef\xb8\x8f 中实现

\n

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>