UI-Kit: Система кнопок

🔴 Primary Buttons (Красные CTA)

Основные призывы к действию. Имеют два белых шеврона на фоне (opacity 0.4), которые смещаются вправо при hover.

Large Записаться на курс 
<a class="btn btn--primary btn--large">
  Записаться на курс
</a>
Medium Записаться на курс 
<a class="btn btn--primary btn--medium">
  Записаться на курс
</a>
Small Записаться 
<a class="btn btn--primary btn--small">
  Записаться
</a>

🟡 Secondary Buttons (Желтые)

Альтернативные CTA-кнопки. Также имеют два белых шеврона на фоне с анимацией.

Large Записаться на курс 
<a class="btn btn--secondary btn--large">
  Записаться на курс
</a>
Medium 
<button class="btn btn--secondary btn--medium">
  Оставить заявку
</button>
На темном фоне Записаться на курс

💬 Social Media Buttons

Кнопки для связи через мессенджеры и соцсети. При hover градиент плавно смещается, создавая эффект перехода цвета.

Telegram 
<a class="social-btn social-btn--telegram">
  <span class="social-btn__icon"></span>
  Связаться в TG
</a>
WhatsApp 
<a class="social-btn social-btn--whatsapp">
  <span class="social-btn__icon"></span>
  Связаться в WA
</a>
VKontakte 
<a class="social-btn social-btn--vk">
  <span class="social-btn__icon"></span>
  Связаться в VK
</a>

⚪ Outline Buttons

Кнопки с прозрачным фоном и обводкой. Для вторичных действий.

Outline Large Подробнее о курсе
Outline Medium Узнать больше

🎯 Состояния и вариации

Hover State Demo

Наведите курсор на кнопки, чтобы увидеть анимацию двух белых шевронов (смещение вправо на 8px)

Наведи на меня И на меня тоже

Disabled State

Full Width Button

📦 Группы кнопок

Горизонтальная группа (по центру)

Записаться Подробнее

Горизонтальная группа (слева)

Оставить заявку Telegram WhatsApp

📦 Карточки

Карточка цены

  • b

    обучение на Категорию B

    Автомобили массой до 3,5 тонни количеством мест не болеевосьми (не считая водителя)

    Срок обучения:

    2,5 месяца

    Формат:

    Очно / дистанционно
    от 40 000 ₽ Записаться на курс

    • Карточка новостей и скидок

  • Акция

    Скидка 50 % на обучение квадроциклу

    6 000 ₽ вместо 12 000 ₽ (количество мест ограничено)

    Квадроцикл

    • Карточка отзывов

    📦 Баннеры

    Баннер с шивронами

    Получи права за 35 дней!
    Оставить заявку
    Баннер ускоренные курсы

    Баннер с социальными сетями

    Баннер с картинкой

    Приведи друга — получи деньги

    Приведи в нашу школу друга и получи 500 ₽!

    Записаться на курс
    Баннер с девушками

    Большой баннер с профитами

    Что вы получаете при обучении вождению автомобиля в нашей школе в Воронеже

    После завершения курса:

    • будете в совершенстве владеть правилами дорожного движения, научитесь быстро решать экзаменационные билеты;
    • приобретёте навыки поездок по городу, а также выполнения упражнений «Гараж», «Эстакада», «Параллельная парковка», «Разворот в ограниченном пространстве», сумеете с лёгкостью применять их во время самостоятельной езды;
    • без проблем сдадите внутренний и внешний экзамен;
    • при необходимости можете взять дополнительные тренировки с инструктором.

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

    Записаться на курс

    Баннер удалёнки

    • Школа у вас дома
    • Возможность повторного просмотра занятий
    • Интернет-обучение в любой точке мира
    • Экономия ваших средств, скидка до 60%
    • Общение с преподавателем в реальном времени
    Баннер удалённого обучения

    📦 таблица

    Курсы Стоимость Вождение Теория
    Категория A, A1     		7 990 ₽ 400 ₽/час вождения 108 часов входят в стоимость
    Категория B, B1     		10 990 ₽ 450 ₽/час вождения 130 часов входят в стоимость
    Категория B, (АКПП)     		10 990 ₽ 500 ₽/час вождения 130 часов входят в стоимость
    Категории C, C1     		10 990 ₽ 750 ₽/час вождения 168 часов входят в стоимость
    Категория D, D1     		10 990 ₽ 800 ₽/час вождения 192 часа входят в стоимость

    Пагинация