Кнопка, фон которой прозрачен и градацией светится только граница. Чистая реализация CSS, не требующая JavaScript.
Чистый дизайн: фон полностью прозрачен. Простой вид, в котором выделяется только градация границы и не мешает содержанию.
Подходит для значков, панелей инструментов и светящихся кнопок: подходит для кнопок управления, расположенных на темном фоне, например на театральных картах.
JavaScript не требуется: достигается только с помощью «анимации» и «композита маски». Минимальное влияние на производительность.
Легко расширять варианты: вы можете легко создавать кнопки с разными темами, просто меняя цвет линейного градиента.
##Точки дизайна и UX
Как работает маска-композит: исключить**: установив параметр «padding: 2px» для псевдоэлемента «::before» и обратно замаскировав поле содержимого в этой области, можно отобразить только границу.
Направление взгляда с помощью анимации: вращающаяся градация плавно переходит на границу, естественным образом привлекая внимание к важным кнопкам.
Увеличение при наведении: выразите ожидание щелчка с помощью небольшого изменения размера «transform: Scale(1.05)».
Вы можете создавать вариации, просто меняя цвет линейного градиента:
/* サンセット */
.gb-btn::before {
background: linear-gradient(45deg, #f97316, #ef4444, #f59e0b);
}
/* オーГолубой */
.gb-btn::before {
background: linear-gradient(45deg, #06b6d4, #3b82f6, #8b5cf6);
}
Чтобы изменить ширину границы, измените значение отступа:
/* 幅を広く (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>| Браузер | Статус совместимости |
|--------|-------|
| Хром 80+ | ✅ Полностью совместим |
| Firefox 99+ | ✅ Полностью совместим |
| Сафари 15.4+ | ✅ Совместимость |
| Край 80+ | ✅ Полностью совместим |
Примечание: для более старых версий Safari требуется
-webkit-mask-composite: xor. В качестве запасного варианта в приемлемых случаях можно использовать border: 2px Solid.