Кнопки и CTA

В базе знаний используется один CTA-компонент: .vp-home-btn. Сейчас в custom.css есть два варианта (--primary / --secondary) и один размер-модификатор (vp-home-btn-big). Третий вариант — --accent (брендовый оранжевый) — описан в этом документе как расширение айдентики, но класса в custom.css ещё нет (см. секцию «Accent (оранжевый)»).

Реальный код существующих вариантов — в .vitepress/theme/custom.css:583–650.

Базовая `.vp-home-btn`

Геометрия: inline-flex, padding: 0.5rem 1.25rem, border-radius: 12px, font: 500 0.9375rem. Плавные переходы по фону / бордеру / цвету / тени. Текст без подчёркивания (text-decoration: none !important).

css

.vp-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

Варианты

Primary (`.vp-home-btn--primary`)

Главный призыв. На главной — «Бесплатная регистрация», в hero-блоках — основная ссылка («Начать обучение», «Перейти к курсам»). Один primary на блок.

Бесплатная регистрация Бесплатная регистрация

html

<a class="vp-home-btn vp-home-btn--primary" href="...">
  Бесплатная регистрация
</a>

<!-- Большой размер для hero -->
<a class="vp-home-btn vp-home-btn-big vp-home-btn--primary" href="...">
  Бесплатная регистрация
</a>

Цвета:

Фон / бордер: #5681c8
Текст: #fff
Hover: фон / бордер #4566a0

VERIFIED: vp-home-btn--primary используется в docs/index.md для CTA «Бесплатная регистрация».

Secondary (`.vp-home-btn--secondary`)

Альтернативный призыв («Вход», «Войти», «Узнать больше»). Стилизуется через VitePress-токены, без брендового цвета — нейтральная кнопка с прозрачным фоном и серым бордером.

Вход Вход в систему

html

<a class="vp-home-btn vp-home-btn--secondary" href="...">Вход</a>

<a class="vp-home-btn vp-home-btn-big vp-home-btn--secondary" href="...">
  Вход в систему
</a>

Цвета:

Фон: var(--vp-c-bg) (белый)
Текст: var(--vp-c-text-1)
Бордер: color-mix(in srgb, var(--vp-c-text-2) 35%, transparent) (~серый 35%)
Hover: фон var(--vp-c-bg-soft), бордер усиливается до 50%

VERIFIED: vp-home-btn--secondary используется в docs/index.md для «Вход».

Accent (`.vp-home-btn--accent`)

Брендовый оранжевый — второй фирменный цвет «Профстандарта» (см. colors.md → «Брендовая палитра»). Используется для ярких маркетинговых призывов, которые должны выделяться сильнее, чем нейтральный secondary: «Бесплатный аудит», «Получить демо», «Узнать стоимость».

Получить бесплатный аудит Получить бесплатный аудит

html

<a class="vp-home-btn vp-home-btn--accent" href="...">
  Получить бесплатный аудит
</a>

<a class="vp-home-btn vp-home-btn-big vp-home-btn--accent" href="...">
  Получить бесплатный аудит
</a>

Цвета:

Фон / бордер: #f6af19
Текст: #202020 — обязательно тёмный, не белый. Контраст белого на оранжевом = 2.1:1 (не проходит WCAG AA); тёмного на оранжевом = 9.2:1 (отлично).
Hover: фон / бордер #e09c10

Класса в custom.css пока нет

Сейчас стиль --accent лежит внутри Vue-компонента.vitepress/theme/components/DsHomeBtn.vue (для превью на этой странице). Когда вариант понадобится на реальных страницах (docs/index.md, лендинги, hero-блоки в статьях) — сначала перенести CSS-блок в custom.css рядом с --primary / --secondary, потом использовать в Markdown.

Откуда взят цвет: фирменная айдентика, main-app использует #f6af19 в btn-orange 54 раза (см. Анализ кода/design-system-audit.md §2.3).

Размер `vp-home-btn-big`

Альтернативная геометрия — больший padding и крупный шрифт. Используется в hero-блоках, где кнопка — главный визуальный акцент.

	`vp-home-btn` (default)	`vp-home-btn-big`
padding	`0.5rem 1.25rem`	`0.6rem 1.5rem`
font-size	`0.9375rem` (≈15 px)	`1.3rem` (≈20.8 px)
font-weight	`500`	`200`
border-radius	`12px`	`12px`

font-weight: 200 на big-кнопке

В custom.css:609 указан font-weight: 200 (Extra Light) для большой кнопки. Это выглядит «лёгко-маркетингово», но не подходит для CTA, которые должны привлекать. Если планируется использовать big-кнопку как primary-CTA — стоит вернуть 500-600.

Парные кнопки

Стандарт: primary + secondary

На главной базы знаний (/) есть классический сценарий: основное действие + нейтральная альтернатива. Это эталон для повторения.

Бесплатная регистрация Вход

html

<div class="vp-home-actions">
  <a class="vp-home-btn vp-home-btn--primary" href="...">
    Бесплатная регистрация
  </a>
  <a class="vp-home-btn vp-home-btn--secondary" href="...">
    Вход
  </a>
</div>

Маркетинговый сценарий: primary + accent

Когда нужны два сильных, равноправных призыва — например, «Бесплатная регистрация» + «Запросить демо». Оба кнопки яркие, оба брендовые, но визуально отличаются.

Бесплатная регистрация Получить демо

html

<div class="vp-home-actions">
  <a class="vp-home-btn vp-home-btn--primary" href="...">
    Бесплатная регистрация
  </a>
  <a class="vp-home-btn vp-home-btn--accent" href="...">
    Получить демо
  </a>
</div>

Не больше двух CTA в блоке

Три кнопки рядом (primary + accent + secondary) — это уже выбор без выбора, пользователь зависает. Если есть третий призыв — оформлять его текстовой ссылкой ниже («Хочу узнать подробнее без демо»).

Обёртка .vp-home-actions (custom.css:574–582) — flex-контейнер с gap: 0.75rem и flex-wrap, чтобы кнопки красиво ложились на узких экранах.

Иконки в кнопках

Поддерживается через .vp-home-btn-icon (фиксированный размер 1.125rem) и модификатор --stroke для контурных SVG:

html

<a class="vp-home-btn vp-home-btn--primary" href="...">
  <svg class="vp-home-btn-icon vp-home-btn-icon--stroke" ...>...</svg>
  Начать обучение
</a>

gap: 0.5rem уже задан в .vp-home-btn, отдельно отступ прописывать не надо.

Доступность

Кнопки реализованы как <a href> — это ссылки, а не действия в JS. Они нативно фокусируются клавиатурой и объявляются скринридерам.
:focus-visible глобально включён через VitePress; для карточек/контейнеров outline: 2px solid var(--vp-c-brand-1) задан явно (см. vp-doc-hub-card:focus-visible).
Контраст по вариантам:
- primary (белый текст на #5681c8) — 4.05:1. На грани WCAG AA для крупного текста (≥18 px), формально ниже для мелкого. Текущая vp-home-btn (15 px / weight 500) AA не проходит. Варианты улучшения: затемнить фон до #3f6db3 (контраст 5.1:1) или поднять font-weight до 600.
- secondary — наследует контраст VitePress-токенов (как обычный текст на странице — passing AA).
- accent (тёмный текст #202020 на #f6af19) — 9.2:1. AAA для всего. Никогда не использовать белый текст на оранжевом — упадёт до 2.1:1.

Антипаттерны

Не делать

Своя «кнопка» через `<button>` в Markdown

html

<!-- ❌ ломает фокус, не получит VitePress-стили -->
<button onclick="window.location='/auth'">Вход</button>

<!-- ✅ всегда <a> с классом vp-home-btn -->
<a class="vp-home-btn vp-home-btn--secondary" href="/auth">Вход</a>

Inline-стили для подгонки

html

<!-- ❌ ломает консистентность -->
<a class="vp-home-btn"
   style="background: green; border-radius: 24px;">
  Заказать звонок
</a>

<!-- ✅ если нужен новый вариант — добавить .vp-home-btn--<name> -->
<!-- в custom.css и описать в этой документации -->

Два primary в одном блоке

html

<!-- ❌ конкурирующие призывы одного цвета -->
<a class="vp-home-btn vp-home-btn--primary" href="/registration">Регистрация</a>
<a class="vp-home-btn vp-home-btn--primary" href="/auth">Вход</a>

<!-- ✅ один primary, один secondary -->
<a class="vp-home-btn vp-home-btn--primary" href="/registration">Регистрация</a>
<a class="vp-home-btn vp-home-btn--secondary" href="/auth">Вход</a>

<!-- ✅ или primary + accent, если оба маркетинговые -->
<a class="vp-home-btn vp-home-btn--primary" href="/registration">Регистрация</a>
<a class="vp-home-btn vp-home-btn--accent" href="/demo">Получить демо</a>

Белый текст на оранжевом

html

<!-- ❌ контраст 2.1:1 — нечитаемо -->
<a class="vp-home-btn vp-home-btn--accent" style="color:#fff">
  Получить демо
</a>

<!-- ✅ accent всегда с тёмным текстом (вшито в класс) -->
<a class="vp-home-btn vp-home-btn--accent">Получить демо</a>

Три CTA рядом

html

<!-- ❌ выбор без выбора, пользователь зависает -->
<a class="vp-home-btn vp-home-btn--primary" href="...">Регистрация</a>
<a class="vp-home-btn vp-home-btn--accent" href="...">Демо</a>
<a class="vp-home-btn vp-home-btn--secondary" href="...">Вход</a>

<!-- ✅ максимум два CTA, третий — текстовая ссылка ниже -->
<div class="vp-home-actions">
  <a class="vp-home-btn vp-home-btn--primary" href="...">Регистрация</a>
  <a class="vp-home-btn vp-home-btn--accent"  href="...">Демо</a>
</div>
<p><a href="...">Уже есть аккаунт? Войти →</a></p>

Расширение

Текущий список вариантов

Вариант	Класс	Где CSS	Статус
Primary (синий)	`vp-home-btn--primary`	`custom.css:629–639`	в проде
Secondary (нейтральный)	`vp-home-btn--secondary`	`custom.css:641–650`	в проде
Accent (оранжевый)	`vp-home-btn--accent`	`components/DsHomeBtn.vue` (временно)	для превью; перенести в `custom.css` при первом использовании на реальной странице
Big size	`vp-home-btn-big`	`custom.css:601–617`	в проде

Если нужен новый вариант

Например, --ghost для inline-CTA в статьях или --danger для кнопки отписки. Порядок:

Зафиксировать цвет в палитре — добавить в colors.md → «Брендовая палитра», описать контраст и правила применения.
Реализовать класс в custom.css — рядом с существующими --primary / --secondary / --accent.
Описать вариант здесь — секция с превью, кодом и правилами.
Добавить во DsHomeBtn.vue props.variant — чтобы можно было показать <DsHomeBtn variant="..."> в превью.

Расширять vp-home-btn-big не нужно — для очень больших CTA проще задать font-size: 1.5rem inline на конкретной странице.

Связанные документы

colors.md — палитра и токены, лежащие под кнопками.
VitePress Default Theme: https://vitepress.dev/reference/default-theme-config

Кнопки и CTA ​

Базовая .vp-home-btn ​

Варианты ​

Primary (.vp-home-btn--primary) ​

Secondary (.vp-home-btn--secondary) ​

Accent (.vp-home-btn--accent) ​

Размер vp-home-btn-big ​

Парные кнопки ​

Стандарт: primary + secondary ​

Маркетинговый сценарий: primary + accent ​

Иконки в кнопках ​

Доступность ​

Антипаттерны ​

Своя «кнопка» через <button> в Markdown ​

Inline-стили для подгонки ​

Два primary в одном блоке ​

Белый текст на оранжевом ​

Три CTA рядом ​

Расширение ​

Текущий список вариантов ​

Если нужен новый вариант ​

Связанные документы ​

Кнопки и CTA

Базовая `.vp-home-btn`

Варианты

Primary (`.vp-home-btn--primary`)

Secondary (`.vp-home-btn--secondary`)

Accent (`.vp-home-btn--accent`)

Размер `vp-home-btn-big`

Парные кнопки

Стандарт: primary + secondary

Маркетинговый сценарий: primary + accent

Иконки в кнопках

Доступность

Антипаттерны

Своя «кнопка» через `<button>` в Markdown

Inline-стили для подгонки

Два primary в одном блоке

Белый текст на оранжевом

Три CTA рядом

Расширение

Текущий список вариантов

Если нужен новый вариант

Связанные документы