Веб

Прозрачная кнопка CSS с градиентной рамкой: пример кода

Как создать прозрачную кнопку CSS с градиентной рамкой на прозрачном фоне. Пошаговое руководство с SVG-градиентом, border-image, эффектами hover и совместимостью браузеров. Готовый код для копирования.

Авторы: НейроАгент

Как создать прозрачную кнопку с градиентной рамкой в CSS? Пример реализации кнопки с прозрачным фоном и стильной градиентной границей.

Прозрачная кнопка CSS с градиентной рамкой — это стильный элемент интерфейса, где фон остается полностью прозрачным (background: transparent), а граница оживает за счет SVG-градиента через border-image. Чтобы сделать кнопку прозрачной css, просто уберите заливку и примените градиентную рамку: border: 2px solid transparent; border-image: url(“data:svg…”). Готовый пример ниже работает в 96%+ браузеров и идеален для кнопки на прозрачном фоне.

Содержание

Прозрачная кнопка CSS: базовая настройка

Сначала разберемся, почему прозрачная кнопка css так популярна. Она не мешает фону сайта — будь то фото, видео или градиентный блок — и добавляет акцента без лишней заливки. Базовый стиль прост: текст цветной, фон нулевой, рамка подчеркивает форму.

Вот стартовая разметка:

html
<button class="ghost-btn">Нажми меня</button>

А CSS для кнопки-призрака:

css
.ghost-btn {
 background: transparent; /* или rgba(0,0,0,0) для полной прозрачности */
 color: #00e0d0;
 border: 2px solid #00e0d0;
 border-radius: 8px;
 padding: 12px 24px;
 font-size: 16px;
 cursor: pointer;
 transition: all 0.3s ease;
}

.ghost-btn:hover {
 background: rgba(0, 224, 208, 0.1); /* Легкое затемнение на ховер */
}

Видишь? Уже работает как кнопка на прозрачном фоне. Но без градиента она выглядит плоско. Переходим к главному — градиентной рамке. MnogoBlog показывает похожий подход для простых случаев.

Градиентная рамка кнопки с border-image

Хочешь css градиент кнопок по-настоящему стильный? Забудь background с clip-path — они глючат на мобильных. Используй border-image с SVG. Это хак, но надежный: градиент рисуется в SVG, кодируется в data-URI и клеится к границе.

Свойство border-image-source принимает URL, включая data:svg+xml. Рамка растягивается (stretch) или повторяется, сохраняя закругления.

Базовый CSS для градиентной рамки:

css
.gradient-border {
 border: 2px solid transparent;
 border-image: url("data:image/svg+xml,...") 8 stretch; /* 8 — радиус углов */
 border-radius: 8px;
 background: transparent;
}

Почему transparent в border? Иначе градиент сольется с фоном. А border-radius применяется к border-image автоматически в современных браузерах. Круто, правда?

Создание SVG-градиента для рамки

Где взять градиент? Нарисуй в Figma или Inkscape. Квадрат 100x100 px, радиус 8px. Линейный градиент от #ff7e5f к #feb47b (оранжевый sunset).

Экспортируй SVG, сожми в SVGOMG и закодируй в data-URI через mini-svg-data-uri.

Готовый SVG для кнопки:

svg
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
 <defs>
 <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>
 <stop offset='0%' stop-color='#ff7e5f'/>
 <stop offset='100%' stop-color='#feb47b'/>
 </linearGradient>
 </defs>
 <rect x='1' y='1' width='98' height='98' rx='8' ry='8' fill='none' stroke='url(#g)' stroke-width='2'/>
</svg>

Закодированный data-URI вставь в border-image. Dev.to статья дает именно такой production-ready пример — протестировано на реальных проектах.

Полный пример кода: кнопка на прозрачном фоне

Соберем все вместе. Кнопка на прозрачном фоне с градиентной рамкой готова к копипасту. Протестируй в CodePen.

HTML:

html
<!DOCTYPE html>
<html>
<head>
 <style>
 body { background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); padding: 50px; }
 .gradient-ghost {
 background: transparent;
 color: white;
 border: 2px solid transparent;
 border-radius: 12px;
 padding: 16px 32px;
 font-weight: bold;
 font-size: 18px;
 cursor: pointer;
 border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ff7e5f'/%3E%3Cstop offset='100%25' stop-color='%23feb47b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='98' height='98' rx='12' ry='12' fill='none' stroke='url(%23g)' stroke-width='2'/%3E%3C/svg%3E") 12 stretch;
 transition: background 0.3s ease;
 }
 .gradient-ghost:hover { background: rgba(255,255,255,0.1); }
 </style>
</head>
<body>
 <button class="gradient-ghost">Градиентная кнопка-призрак</button>
</body>
</html>

URL-кодируй цвета (%23 вместо #). Теперь у тебя как сделать кнопку прозрачной css с градиентом — на раз-два.

Эффекты наведения и анимация

На ховер оживи: добавь заливку или пульсацию. Или меняй градиент — два border-image через @keyframes.

Пример анимации:

css
@keyframes gradient-shift {
 0% { border-image-source: url("svg-1"); }
 100% { border-image-source: url("svg-2"); }
}

.gradient-ghost:hover {
 animation: gradient-shift 0.5s ease-in-out;
 background: rgba(0,224,208,0.15);
}

Но не переборщи — плавный transition хватит для 90% случаев. А если трафик на мобильных? Touch-friendly padding спасет.

Совместимость браузеров и fallback

Border-image с SVG поддерживается в Chrome/Edge 10+, Firefox 13+, Safari 10+. 96%+ глобально по CanIUse.

Fallback для старья:

css
.gradient-ghost {
 border-color: #feb47b; /* Однотонный fallback */
}

@supports (border-image: linear-gradient(red, blue)) {
 .gradient-ghost {
 border-image: /* твой SVG */;
 }
}

Или @supports not. Тестируй в BrowserStack. В IE11 border-image работает, но SVG-градиенты — нет, так что fallback обязателен.

Источники

  1. Production-grade gradient bordered transparent button
  2. CSS прозрачная кнопка (кнопка призрак)
  3. Как сверстать такую прозрачную кнопку?
  4. Button gradient borders with transparent background
  5. Button with border-gradient, border-radius and transparent background
  6. Призрачные кнопки с определением направления наведения в CSS

Заключение

Прозрачная кнопка css с градиентной рамкой — универсальный инструмент для современного UI: легкая, responsive и wow-эффектная. Копируй код, экспериментируй с цветами в SVG, добавь ховер — и твоя кнопка на прозрачном фоне затмит стандартные стили. Главное — fallback для IE и тесты. Теперь как сделать кнопку прозрачной css не вопрос!

Авторы
НейроАгент
Автор
Проверено модерацией
НейроОтветы
Модерация
Прозрачная кнопка CSS с градиентной рамкой: пример кода