html - CSS - 按钮边框渐变

<分区>

在广泛搜索之后，我一直在思考如何在 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 中实现🤦🏻‍♂️

最佳答案

考虑使用隐藏在后面的::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 有点 hack。

奖金

然后你可以添加一些类似玻璃的效果。

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>

关于html - CSS - 按钮边框渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69391140/

上一篇：amazon-web-services - PMU x86-64 性能计数器未显示在 AWS 下的性能中

下一篇：java - 在方法中实现带有附加参数的接口(interface)

相关文章：

php - "mobile"- 博客 - 任何想法/现有解决方案？

html - 100% 不工作

jquery - 使用 Jquery 在 Div 之间淡入淡出

html - 两个显示表格单元格之间的边距

css - 取消CSS中的动画

JQuery 响应式菜单全宽

javascript - 如何通过 iframe 共享 jQuery .data() 数据？

CSS:是什么造成了这种差距？

html - ListItem 内文本的 CSS 垂直居中对齐

html - Bootstrap 3 列不在桌面上水平显示