November 4, 2025
Кнопки с градиентной обводкой
Если нужно сделать кнопку с градиентным фоном и обводкой, то без костылей не обойтись.
Пример в CodePen
Градиентный фон
Градиентный фон делается очень просто:
background: linear-gradient(137deg, #36ea8a 0%, rgba(30, 132, 78, 0.5) 100%);
Но вот обводку через CSS градиент border напрямую задать нельзя. CSS пока не поддерживает такую возможность.
По этому приходиться выкручиваться через костыли и использовать псевдоэлементы ::brfore или ::after.
Обводка элемента с градиентом
<button class="ui-button"><p>Кнопка</p></button>
.button {
position: relative;
background: linear-gradient(90deg, #00ff88, #00bfff);
border: none;
color: #fff;
padding: 12px 24px;
border-radius: 12px;
z-index: 1;
cursor: pointer;
}
.button::before {
content: "";
position: absolute;
inset: -2px;
background: linear-gradient(90deg, #0066ff, #00ffff);
border-radius: 14px;
z-index: -1;
}
Как работает CSS обводка с градиентом
— Основной элемент получает градиентный фон
— Задаем псевдоэлементу ::before тоже градиентный фон, Размером делаем его чуть больше кнопки, и ставим его за кнопку. Получается что его края выполняют роль обводки