带透明度的渐变边框按钮实现及现有代码透明效果异常问题咨询

问题原因 #

你当前无法实现按钮透明效果的核心问题有两点：

1. 按钮自身设置了background: #000000纯黑背景，完全遮挡了下层内容
2. 现有的伪元素层级和裁剪逻辑没有预留中间透明区域，渐变效果完全被按钮背景覆盖

修复代码 #

CSS

body {
  margin-top: 60px;
  /* 可自行设置背景色/背景图测试透明效果 */
  background: #f0f0f0;
}
.btn.btn-primary {
    color: #ffffff;
    position: relative;
    /* 替换原有纯黑背景为透明 */
    background: transparent;
    /* 调整padding抵消边框厚度，保持按钮原有尺寸 */
    padding: 14px 34px;
    border-bottom-left-radius: 10% 40%;
    border-top-right-radius: 10% 40%;
    /* 移除overflow:hidden避免渐变边框被裁剪 */
    overflow: visible;
    z-index: 1;
    text-decoration: none;
}
.btn.btn-primary:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -4px;
    border-radius: inherit;
    background: linear-gradient(to right, #ef4a25 0%, #fba72f 100%);
    /* 裁剪伪元素，仅保留外围4px渐变边框，中间区域挖空实现透明 */
    clip-path: polygon(
        0% 0%, 100% 0%, 100% 100%, 0% 100%,
        4px 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 4px
    );
}

HTML

<a class="btn btn-primary" href="#">Contact Us</a>

可选优化 #

如果需要半透明毛玻璃效果，可以给.btn.btn-primary添加以下属性：

backdrop-filter: blur(4px);
background: rgba(0,0,0,0.2);

内容的提问来源于stack exchange，提问作者Victor