渐变边框按钮
结合CSS“-webkit-mask-composite”日本动画动画，具有浮动移动动作。
HTMLCSS
预览
背景透明且仅边框带有渐变效果的按钮。不需要 JavaScript 的纯 CSS 实现。
用例和功能
-
干净的设计：背景完全透明。简单的外观，只有边框的渐变突出，不会干扰内容。
-
适用于图标、工具栏和发光按钮：适用于放置在深色背景上的控制按钮，例如剧院地图。
-
不需要 JavaScript：仅使用“animation”和“mask-composite”即可实现。性能影响最小。
-
易于扩展变化：只需更改“线性渐变”的颜色即可轻松创建不同主题的按钮。
设计和用户体验要点
-
mask-composite: except 的工作原理：通过在
::before伪元素上设置padding: 2px并反向屏蔽该区域的内容框，只能显示边框。 -
用动画引导眼睛：旋转渐变在边框上流动，自然地将眼睛吸引到重要按钮。
-
悬停时放大：通过“transform:scale(1.05)”尺寸的细微变化来表达点击的预期。
如何定制
您可以通过简单地更改“线性渐变”的颜色来创建变化：
/* サンセット */
.gb-btn::before {
background: linear-gradient(45deg, #f97316, #ef4444, #f59e0b);
}
/* オー青色 */
.gb-btn::before {
background: linear-gradient(45deg, #06b6d4, #3b82f6, #8b5cf6);
}
要更改边框的宽度，请更改“padding”的值：
/* 幅を広く (3px) */
.gb-btn::before { padding: 3px; }
.gb-btn::after { inset: 3px; }
实现代码
<button class="gb-btn">Primary</button>
<button class="gb-btn gb-btn-success">Success</button>
<button class="gb-btn gb-btn-warning">Warning</button>
<style>
.gb-btn {
position: relative;
background: transparent;
border: none;
padding: 14px 36px;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.08em;
cursor: pointer;
border-radius: 8px;
color: white;
z-index: 1;
transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.gb-btn::before {
content: '';
position: absolute;
inset: 0;
padding: 2px;
border-radius: 8px;
background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe);
background-size: 400% 400%;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: gb-rotate 3s ease infinite;
}
.gb-btn::after {
content: '';
position: absolute;
inset: 2px;
border-radius: 6px;
background: rgba(17,24,39,0.9);
z-index: -1;
}
.gb-btn:hover { transform: scale(1.05); }
.gb-btn-success::before { background: linear-gradient(45deg, #43e97b, #38f9d7); }
.gb-btn-warning::before { background: linear-gradient(45deg, #f7971e, #ffd200); }
@keyframes gb-rotate {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
</style>浏览器兼容性状态
|浏览器 |兼容性状态 |
|--------|--------|
| Chrome 80+ | ✅ 完全兼容 |
|火狐浏览器 99+ | ✅ 完全兼容 |
| Safari 15.4+ | ✅ 兼容 |
|边缘 80+ | ✅ 完全兼容 |
注意：旧版 Safari 需要
-webkit-mask-composite: xor。作为后备方案，可以在可接受的情况下使用“border: 2pxsolid”。