Генератор золотой кнопки CSS

Металлической кнопке нужен градиент, улавливающий свет сверху вниз, а не просто сплошной цвет. Этот инструмент позволяет ввести текст кнопки, выбрать металлический стиль — Золото, Серебро, Бронза или Розовое золото —, настроить радиус скругления углов и мгновенно получить код CSS с живым превью.

Что это за инструмент?

Этот инструмент применяет предустановленный линейный градиент из трёх точек для каждого металлического стиля, настроенный так, чтобы выглядеть как свет, отражающийся от полированной металлической поверхности.

Переключайтесь между Золотом, Серебром, Бронзой и Розовым золотом с помощью селектора стиля — каждый вариант имеет свой собственный градиент, цвет текста и тень, настроенные под этот металл.

Живое превью мгновенно обновляется по мере ввода текста кнопки, смены стиля или изменения радиуса скругления, что позволяет увидеть точный результат перед копированием CSS.

Зачем его использовать?

Вы собираете лендинг онлайн-курса или наставничества и хотите золотую кнопку «Записаться сейчас», но без экспорта картинки — чтобы страница оставалась лёгкой.
В интернет-магазине есть программа лояльности с уровнями Серебро, Золото и Платина, и хочется, чтобы значок каждого уровня был выполнен в соответствующем металлическом цвете для наглядной иерархии.
Делаете сайт-приглашение на свадьбу и хотите кнопку «Подтвердить присутствие» в розовом золоте, но простой градиент выглядит дёшево, а не элегантно.
Клиент попросил «сделать кнопку подороже на вид», а обычный двухцветный градиент не даёт того самого металлического блеска, который он представлял.
Переключаетесь между четырьмя металлическими стилями и настраиваете border-radius прямо в превью, чтобы найти отделку, которая лучше всего впишется в общий тон сайта.
Дизайн лендинга ещё не анонсирован публично, и приятно, что CSS не проходит через сторонний сервер — вся генерация происходит в браузере.

Как использовать

Введите текст вашей кнопки.
Выберите металлический стиль — Золото, Серебро, Бронза или Розовое золото.
Настройте ползунок радиуса скругления в соответствии со стилем углов вашего дизайна.
Нажмите «Копировать», чтобы скопировать сгенерированный код CSS, и вставьте его в свою таблицу стилей.

Пример

Ввод

Текст: «Buy Now», Стиль: Золото, Радиус: 8

Результат

background: linear-gradient(180deg, #f9e28c 0%, #d4a017 50%, #f9e28c 100%);
color: #5c3d00;
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(212,160,23,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
padding: 12px 32px;
font-weight: 600;
cursor: pointer;

Сгенерированный CSS сочетает металлический градиент из трёх точек, соответствующий цвет текста и тень, а также стандартные отступы кнопки для готового к использованию блока стилей.

Металлические стили на первый взгляд

Каждый металлический стиль использует свой собственный настроенный градиент, цвет текста и цвет тени.

Стиль	Тон градиента	Цвет текста
Золото	Тёплый жёлто-золотой, от светлого к тёмному и обратно к светлому	Глубокий коричнево-золотой (#5c3d00)
Серебро	Холодный светло-серый, от светлого к тёмному и обратно к светлому	Тёмно-серый (#333333)
Бронза	Тёплый медно-коричневый, от светлого к тёмному и обратно к светлому	Глубокий коричневый (#3e2408)
Розовое золото	Мягкий розово-румяный, от светлого к тёмному и обратно к светлому	Глубокий розовый (#4a1620)

Где этот стиль применяют на практике

Лендинги онлайн-курсов, наставничества и консалтинговых услуг часто используют золото именно на главной кнопке призыва к действию — «Записаться сейчас», «Забронировать место» — чтобы подчеркнуть эксклюзивность и ценность предложения. На страницах товаров или услуг с высоким чеком золотая металлическая кнопка обычно вызывает больше доверия, чем классические сплошные красные или зелёные кнопки, которые уже воспринимаются как признак типичной распродажи.

Программы лояльности интернет-магазинов и авиакомпаний тоже часто строятся на этой логике металлических цветов по уровням — Серебро, Золото, Платина. Присвоение каждому уровню кнопки или значка в соответствующем металлическом цвете помогает пользователю мгновенно узнавать свой текущий статус и создаёт понятный визуальный стимул перейти на следующий уровень.

Часто задаваемые вопросы

Почему у градиента три цветовые точки, а не две?

Градиент из трёх точек (светлый, тёмный, светлый) имитирует то, как свет отражается от изогнутой или шлифованной металлической поверхности, что выглядит гораздо реалистичнее простого перехода от светлого к тёмному.

Могу ли я использовать это на ссылке или div вместо элемента button?

Да — сгенерированный CSS представляет собой стандартные свойства background, color, border-radius, box-shadow и text-shadow, поэтому он работает на любом элементе, который вы обычно стилизуете как кнопку.

Почему цвет текста тёмный, а не белый?

Металлические поверхности, такие как золото и бронза, лучше всего смотрятся с тёмным, тёплым цветом текста, соответствующим оттенку металла — белый текст обычно выглядит плоско и разрушает металлическую иллюзию.

Сохраняет или отслеживает ли этот инструмент то, что я ввожу?

Нет. CSS генерируется полностью в вашем браузере — ничего не отправляется и не сохраняется на сервере.

Будет ли это работать во всех браузерах?

Да — linear-gradient, box-shadow и text-shadow отлично поддерживаются во всех современных браузерах, включая Chrome, Firefox, Safari и Edge.

Можно ли добавить анимацию свечения при наведении курсора?

Этот инструмент генерирует только статический стиль, но вы можете взять полученный градиент за основу и самостоятельно добавить `:hover`, усиливающий box-shadow, либо использовать `filter: brightness()`, чтобы кнопка слегка светлела при наведении — это создаёт более продуманное взаимодействие.

Хорошо ли этот стиль смотрится на сайте с тёмной темой?

Да. Металлические цвета вроде золота и розового золота достаточно насыщенные и сохраняют контраст даже на тёмном фоне, поэтому хорошо работают как акцентная кнопка на сайте с dark mode. Серебро же может терять контраст в зависимости от конкретного оттенка тёмного фона — стоит сверить это в превью с реальным цветом вашего сайта.

Можно ли изменить угол сгенерированного градиента?

По умолчанию инструмент строит градиент сверху вниз (180deg), но вы можете вручную изменить значение угла внутри `linear-gradient` в скопированном CSS, чтобы имитировать свет, падающий под другим углом, например по диагонали.

Можно ли использовать несколько металлических стилей на одной странице без визуального беспорядка?

Если цель — разграничить уровни или тарифы (например, Серебро, Золото и Платина), одновременное использование нескольких металлических стилей вполне уместно и помогает считать иерархию. Но если на странице несколько обычных кнопок призыва к действию, смешивание разных металлических стилей может нарушить единство дизайна — в этом случае лучше выбрать один основной стиль и оставить другой металл только для самой важной кнопки.