Кнопки для сайта: каким должны быть, чтобы на них нажимали

О чем речь? Кнопки для сайта – важные элементы интерфейса, которые помогают пользователям взаимодействовать с контентом. Они выполняют различные функции: от перехода на страницы до отправки форм и запуска действий.

Где размещать? Вид кнопок зависит от их назначения и логики страницы. Главное – сделать их заметными, удобными и интуитивно понятными, чтобы посетители могли легко выполнять целевые действия.

Что лучше - кнопки для сайта или ссылки

На большинстве веб-страниц вы заметите, что преобладают именно ссылки, а не красивые кнопки для сайта. Это объясняется тем, что для создания кнопки требуется дизайн и дополнительные ресурсы, тогда как ссылка добавляется быстро и без усилий.

Тем не менее, обе эти формы навигации выполняют схожие функции в продвижении сайта. Важно понимать, в каких случаях уместнее использовать кнопку, а когда достаточно ссылки.

Источник: shutterstock.com

Если на странице размещено слишком много кнопок, это может негативно сказаться на скорости загрузки ресурса и вызвать у пользователя путаницу из-за множества призывов к действию. Поэтому кнопки лучше оставлять для ключевых задач: кнопка заказа для сайта, загрузки файла, регистрации. Во всех других ситуациях достаточно ссылок.

Действия, требующие серьезного вовлечения пользователя, – регистрация, оформление покупки, оставление комментариев – целесообразно сопровождать кнопками. Например, кнопка «главная страница» помогает быстро вернуться к началу ресурса. Для простого перемещения по сайту и потребления информации удобнее ссылки.

Виды кнопок для сайта

Объемные кнопки

Такие кнопки чаще всего имеют прямоугольную форму с эффектом рельефа. За счет светотени они визуально выделяются и кажутся кликабельными. Их главная задача – добавить выразительности дизайну и привлечь внимание к ключевым действиям на странице.

Где применяются:

• при размещении элементов в одну строку;

• на сайтах и в приложениях с большим количеством информации, чтобы подчеркнуть важные действия.

Плоские кнопки страниц для сайта

Они лишены рельефа, но выделяются цветом. Их преимущество – ненавязчивость: пользователь сосредоточен на контенте, а не на декоративных элементах.

Где применяются:

• в диалоговых окнах для органичного сочетания с текстом;

• в панели инструментов;

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

Кнопки-переключатели

Позволяют менять состояния элементов: от простого Вкл/Выкл до выбора из нескольких опций.

Где применяются:

• для переключения состояния (активно/неактивно);

• для групп связанных функций (не менее трех кнопок в ряду), где обязательно присутствует подпись или иконка;

• в интерфейсах, где пользователь может подтверждать и отменять действие, например, при оценке товара звездами.

Контурные кнопки

Это прозрачные элементы с текстом и тонкой рамкой по периметру. Они просты, лаконичны и не отвлекают внимание от основного призыва к действию.

Где применяются: двторостепенных функций, которые не должны конкурировать с главным CTA (Call To Action). Пользователь сначала замечает основную кнопку, а при необходимости – второстепенную.

Плавающие кнопки для сайта

Один из элементов Material Design от Google – круглая кнопка, которая при нажатии слегка приподнимается и сопровождается анимацией «чернильного пятна». Часто имеет иконку.

Где применяются: для вызова важных инструментов, заметных на фоне интерфейса. При необходимости нужно открыть меню с дополнительными функциями. Такие кнопки поддерживают анимацию перемещения и трансформации.

Иерархия кнопок для сайта

Представьте ситуацию: вы просыпаетесь среди ночи и решаете заказать что-то ненужное в интернет-магазине. Что вы делаете первым делом? Верно – нажимаете кнопку. Хотите разобраться с новым приложением? Опять ищете кнопку. Даже когда нужно отменить заказ или убрать товар из корзины, все сводится к нажатию кнопки.

Источник: shutterstock.com

И вот тут возникает проблема: кнопок слишком много. Но важно помнить, что не каждая из них играет одинаковую роль. В интерфейсном дизайне кнопки принято разделять по уровню приоритета: основные (primary), второстепенные (secondary) и дополнительные (tertiary). Давайте разберемся, как они работают и зачем нужны. Предлагаем примеры кнопок для сайта.

Primary button

Primary button – это главный акцент интерфейса, кнопка, которая направляет пользователя к ключевому действию. Это может быть «Отправить», «Купить» в магазине или «Забронировать» на сервисе вроде Airbnb.

Такая кнопка всегда должна выделяться среди остальных элементов: быть заметной, но не кричащей. Чтобы достичь этого эффекта, для кнопок сайта используют насыщенные и контрастные цвета, которые хорошо различимы на фоне интерфейса. Особенно важно учитывать дизайн в темной теме, где яркость и контраст кнопки играют ключевую роль.

Secondary button

Secondary button – вспомогательные элементы. Они не призывают к действию напрямую, но позволяют отменить выбор, закрыть форму или выбрать альтернативный сценарий.

Возьмем YouTube: основная кнопка там – «Загрузить видео», а «Отмена» или «Закрыть» – как раз второстепенные. Они незаметнее, но всегда рядом, чтобы упростить взаимодействие. По дизайну secondary-кнопки более сдержанные, чем primary, но должны иметь четкие состояния (hover, active, disabled), чтобы пользователь без труда понимал, что с ними происходит.

Tertiary button

Tertiary buttons используются для действий, которые выполняются редко и не требуют постоянного внимания. Например: «Удалить аккаунт», «Отключить подписку» или «Сбросить настройки».

Главное правило: такие кнопки не должны перетягивать внимание на себя и, тем более, маскироваться под основные элементы. Ошибочное нажатие на «Удалить все» вместо «Сохранить» может привести к критичным ошибкам, и такие решения уже ближе к темным паттернам, которых лучше избегать.

Визуальные типы кнопок

Помимо иерархии по значимости, кнопки можно классифицировать по визуальному оформлению и механике взаимодействия. Рассмотрим наиболее распространенные варианты.

• Icon button. Графические кнопки для сайта в виде иконок экономят пространство и дают быстрый визуальный ориентир. В Instagram, например, сохранение публикации обозначается иконкой закладки. Пользователь моментально понимает, что произойдет при клике.

• Text button. Текстовые кнопки – легкие и ненавязчивые, без рамок и заливок. По визуальной массе они минимальны, поэтому идеально подходят для второстепенных действий. При разработке стоит помнить: даже если кнопка выглядит как текст, у нее должен быть кликабельный контейнер, равный по размеру другим кнопкам. Это обеспечивает единый ритм интерфейса.

• Outlined button. Кнопки-контуры («ghost buttons») состоят из рамки и надписи. Они заметнее текстовых, но уступают по значимости заливным. В Pinterest такая кнопка используется для действия «Подписаться».

• Raised button. Приподнятые кнопки выделяются за счет теней и эффекта «возвышения». Они визуально акцентируют внимание и часто применяются для действий вроде «Добавить в корзину» (пример – Amazon). Но дизайнеру важно соблюдать баланс, так как избыток теней перегружает интерфейс и может сбить пользователя с толку.

• Flat button. Плоские кнопки лишены теней и объемных эффектов, но сохраняют четкую форму и цвет. В Spotify, например, кнопка «Play» выполнена именно так. Минус – они могут теряться на фоне других элементов. Решение: яркий цвет или контур, который вернет им нужный вес.

• Split button. Кнопки с дополнительным меню позволяют не только выполнять базовое действие, но и предлагать расширенные опции. В Word это «Сохранить», где скрываются варианты «Сохранить как копию» или «Сохранить в другом формате». Важно не перегружать такие меню: оптимальное количество по закону Миллера составляет 5-9 пунктов.

• Toggle button. Кнопки-переключатели объединяют несколько режимов и работают в группе. В Spotify это выбор режима воспроизведения: «Повтор», «Случайный» или «Обычный». Включение одного состояния автоматически отключает остальные.

• Menu button. Когда нужно сгруппировать равнозначные действия, удобно использовать кнопку-меню. Она скрывает список опций, освобождая пространство и упрощая интерфейс.

• Floating Action Button (FAB). FAB – фирменный элемент Material Design от Это «плавающая» кнопка, обычно круглая с иконкой. Она всегда закреплена в углу экрана и доступна для ключевого действия.

В Google Calendar такая кнопка используется для «Добавить событие» с иконкой «+». Важно помнить: на экране должна быть только одна FAB, иначе она потеряет свою уникальность.

Как сделать кнопки на сайте полезными для пользователей

Выделяйте значимые действия с помощью дизайна

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

Например, кнопка входа для сайта обычно выделяется как основной элемент, а остальные действия могут быть оформлены как второстепенные или третичные.

Источник: shutterstock.com

Например, кнопка «Отправить сообщение» может быть основной, «Сохранить черновик» – вторичной, а «Удалить» – третичной. Такая последовательность направляет внимание пользователя и упрощает навигацию.

Не всегда нужно подчеркивать «правильную» кнопку

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

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

Кнопка должна выглядеть как кнопка

Стив Круг в книге «Не заставляйте меня думать» подчеркивает, как важно создавать интерфейс без головоломок. Пользователи уже привыкли к определенному визуальному языку кнопок. Если слишком сильно отклоняться от привычного дизайна, люди будут теряться.

Например, не стоит использовать один цвет для кликабельных и некликабельных элементов, так как пользователь не сможет понять, где именно нужно нажимать.

Соблюдайте единый стиль

Последовательный стиль повышает скорость и точность взаимодействия. Если кнопки выполнены в едином ключе – по цвету, форме или типографике – пользователю проще ориентироваться и принимать решения. Планируя основные, второстепенные и третичные кнопки, постарайтесь сохранить между ними визуальную гармонию.

Продумывайте размер кнопок

Слишком маленькая кнопка или слишком близко расположенные элементы вызывают раздражение и ошибки.

Для большинства платформ оптимальный размер интерактивных элементов – около 48x48 dp. Dp (density-independent pixels) – это условная единица, которая сохраняет одинаковый размер элементов на разных экранах. В отличие от обычных пикселей, dp учитывает плотность дисплея.

Для кнопок с иконками интерактивная область должна быть больше самой иконки. Это важно не только для смартфонов и планшетов, но и кнопок для веб сайтов, где управление ведется с помощью мыши.

ТОП-7 кейсов
из разных ниш с ростом
от 89% до 1732%

Узнать подробнее

Делайте дизайн кнопок для сайта доступным

Этот принцип актуален для всех элементов интерфейса. Размер интерактивной зоны кнопки – лишь один из факторов, влияющих на удобство использования. Кроме того, на доступность влияют шрифт, контраст и цветовая гамма. Существуют специальные инструменты, которые оценивают, насколько легко пользователю взаимодействовать с элементами интерфейса.

Дизайнерам стоит тесно сотрудничать с разработчиками, чтобы кнопки корректно работали с экранными считывающими устройствами – встроенными в операционные системы программами для людей с нарушениями зрения. Все интерактивные элементы должны иметь атрибут role="button", чтобы считывающее устройство распознавало их как настоящие кнопки.

Учитывайте жестовое взаимодействие

Жесты позволяют пользователю управлять приложением с помощью касаний, экономя время и создавая ощущение тактильного контроля. Сегодня многие интерфейсы активно используют жесты: свайпы для пролистывания контента, двойные касания для лайка и другие действия, привычные пользователям смартфонов и планшетов.

Источник: shutterstock.com

Используйте понятные названия кнопок

Текст на кнопке так же важен, как и ее дизайн. Если пользователь не поймет, какое действие выполняет кнопка, это может привести к ошибкам или потере времени.

Оптимально использовать глаголы, отражающие суть действия: например, «Добавить в корзину» или «Подтвердить заказ». Кнопка как бы спрашивает: «Хотите выполнить это действие?» Общих формулировок вроде «Да», «Нет», «Подтвердить» или «Отправить» лучше избегать.

Порядок OK/Отмена или Отмена/OK

Споры о расположении кнопок ведутся долго, но на практике оба варианта допустимы:

• Размещение «OK» слева соответствует привычному порядку чтения слева направо и используется, например, в Windows.

• Размещение «OK» справа позволяет пользователю сначала оценить все варианты и снизить риск ошибки, так принято у Apple.

Любой порядок работает корректно и не создает проблем с юзабилити, если соблюдена логика интерфейса.

Старайтесь избегать неактивных кнопок

Каждый сталкивался с неактивной кнопкой, не понимая, почему она не работает. Такие состояния показывают, что элемент временно недоступен, но может активироваться позже. Однако это может запутывать пользователя.

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

Создание кнопки для сайта HTML: пошаговая инструкция

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

Источник: shutterstock.com

Шаг 1. Формируем каркас HTML

Если у вас еще нет HTML-файла, создайте новый документ с базовой структурой:

<!DOCTYPE html>

<html>

<head>

<title>Пример кнопки-ссылки</title>

</head>

<body>

<!-- Здесь разместим кнопку -->;

</body>

</html>

Шаг 2. Вставляем ссылку

Внутри тега <body> добавьте тег <a> с атрибутом href, указывающим адрес страницы, на которую должна вести кнопка:

<a href="https://example.com&quot;&gt; Перейти на сайт </a>

Шаг 3. Превращаем ссылку в кнопку с помощью CSS

Чтобы ссылка выглядела как полноценная кнопка и привлекала внимание посетителей, ее можно оформить с помощью кнопок CSS для сайта. Добавьте блок <style> в <head>:

<style>

.button-link {

display: inline-block

padding: 12px 24px

background-color: #4CAF50

color: #ffffff

text-decoration: none

border-radius: 5px

font-family: Arial, sans-serif

font-size: 16px

transition: background-color 0.3s ease

}

.button-link:hover {

background-color: #45a049

}

</style>

Шаг 4. Применяем стили кнопок для сайта к ссылке

Добавьте созданный класс к тегу <a>, чтобы кнопка приобрела заданный вид:

<a href="https://example.com&quot; class="button-link"> Перейти на сайт </a>

Шаг 5. Улучшаем функциональность кнопки

Для удобства и безопасности кнопки рекомендуется добавить:

target="_blank" – открытие ссылки в новой вкладке;

rel="noopener noreferrer" – защита от потенциальных угроз при открытии внешнего сайта;

title="Посетить Example.com" – подсказка при наведении.

Итоговая кнопка будет выглядеть так:

<a href="https://example.com&quot; class="button-link" target="_blank" rel="noopener noreferrer" title="Посетить Example.com"> Перейти на сайт </a>

Правильное расположение и выделение кнопки желаемого действия для сайта

В диалоговых окнах кнопки для целевого действия (кнопки «Купить», «Оформить заказ», «Да», «ОК» и подобные) показывают максимальную эффективность, когда размещены в правой части экрана.

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

В этом случае пользователь сначала фиксируется на второстепенной кнопке, а затем переходит к основной. Если кнопка слева, на пути к выполнению действия возникают три точки визуального внимания, тогда как справа – только две.

Визуальное выделение целевой кнопки. Чтобы кнопка привлекала и удерживала внимание, ее следует выделять. Эффективные способы:

• Использовать насыщенный цвет для целевой кнопки и приглушенный – для второстепенной.

• Разместить альтернативную кнопку на фоне, чтобы она визуально сливалась с окружением (как, например, кнопка «Выйти» в Skype).

• Сделать альтернативное действие ссылкой вместо полноценной кнопки.

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

Источник: shutterstock.com

9 ключевых рекомендаций по размещению кнопок на сайте:

• Пользователь должен легко находить кнопки. Например, элементы «Назад» и «Вперед», как кнопки перехода для сайта, лучше располагать рядом.

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

• Второстепенные кнопки не должны отвлекать от основной. Форма и скругления могут быть едиными, но цвет и насыщенность – различными.

• Не стоит злоупотреблять тенями: чрезмерные эффекты отвлекают внимание и выглядят неаккуратно.

• Поддерживайте единый визуальный стиль во всех элементах интерфейса. Это делает использование сайта предсказуемым и комфортным.

• «Призрачные» кнопки должны оставаться видимыми, даже если они менее заметны. Текст должен читаться, а контур сохранять форму. Белая заливка – простой способ обеспечить видимость.

• Простые кнопки вроде «ОК» стоит привязывать к конкретному действию, чтобы они были информативными.

• Целевая кнопка должна находиться в нижнем правом углу. Исследования, включая принцип Гутенберга, показывают, что пользователь естественно фиксирует внимание в этом месте, наряду с левым верхним углом.

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

Как повысить эффективность кнопок для сайта

Кнопки на сайтах почти всегда содержат призыв к действию (CTA), но не всегда пользователи реагируют на них. Чтобы увеличить количество нажатий, важно сделать кнопки для сайта убедительными и заметными. Рассмотрим ключевые методы повышения эффективности с точки зрения юзабилити.

Придание кнопке «реалистичности» с помощью стилей

Чем натуральнее выглядит кнопка, тем выше вероятность, что посетитель кликнет по ней. Добиться этого можно с помощью градиентов, теней и скругленных углов. Люди ежедневно нажимают десятки физических кнопок – в лифте, на телевизоре, кондиционере, телефоне.

Особенно это важно, когда речь идет про кнопки для мобильного сайта, ведь на небольшом экране элемент должен быть максимально удобным и узнаваемым. Если кнопка на сайте визуально напоминает настоящую, она вызывает автоматическую реакцию, и пользователь нажимает ее, не раздумывая.

Использование контрастных цветов

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

1. Оптимальные размеры кнопки для сайта. Размер кнопки напрямую влияет на ее заметность. Большая кнопка привлекает внимание, но она не должна доминировать над контентом. При ее увеличении необходимо пропорционально увеличить размер шрифта текста CTA. Главное – сохранить гармонию с остальной частью страницы.

2. Эффект срочности в тексте кнопки. Слова вроде «Сейчас», «Сегодня», «В один клик», «Немедленно» создают ощущение срочности. Использование подобных слов в CTA стимулирует пользователей к быстрому действию.

3. «Мягкий» призыв к действию. Не все посетители сразу готовы совершить покупку или регистрацию. Причины могут быть разными: высокая цена, непонимание ценности продукта. В таких случаях эффективны мягкие CTA: предложите демоверсию, бесплатный пробный период или дополнительную информацию о товаре.

4. Правильное оформление текста кнопки. Если CTA состоит из двух слов, каждое из них лучше писать с заглавной буквы, это делает сообщение более убедительным. Если текст длиннее трех слов, достаточно сделать заглавной первую букву первого слова, остальные – строчными. Пример формул: Жесткий CTA: одно–два слова, каждое с заглавной; Мягкий CTA: три слова и более, заглавная только у первого слова.

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

6. Эффекты при наведении. Изменение внешнего вида кнопки при наведении курсора помогает убедить пользователя кликнуть. Эффект может быть разным: смена градиента, изменение цвета текста, а также смена курсора на указатель в виде руки. Это усиливает ощущение интерактивности и делает интерфейс более понятным.

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Часто задаваемые вопросы о кнопках для сайта

Как грамотно применять градиенты при оформлении кнопок?

Градиенты помогают сделать элементы интерфейса более натуральными и объемными. Когда кнопка «освещена» сверху, создается иллюзия реального света и объема: верхняя часть кажется ближе, нижняя – дальше.

При проектировании кнопок важно помнить:

• кнопка с ярким верхом и затемнением снизу воспринимается как выпуклая;

• кнопка с темным верхом и светлым низом выглядит вогнутой, как будто нажата.

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

Какие кнопки CTA лучше не использовать?

Чтобы кнопки действительно приносили конверсии, избегайте следующих ошибок:

• Не размещайте длинные тексты. Слишком много слов отвлекает посетителя и снижает кликабельность.

• Простейшие фразы вроде «Оставить заявку» или «Узнать больше» часто выглядят скучно. Лучше придумать более интересный призыв.

• Не используйте сложные дизайнерские предложения. Необычная форма кнопки для сайта может остаться незамеченной или вызвать путаницу.

• Слишком скромные кнопки тоже не работают. Мелкая, сливающаяся с фоном, кнопка останется незамеченной.

• Не делайте ее чрезмерно большой, это смотрится агрессивно и сбивает с толку. Найдите золотую середину.

• Если вы хотите мотивировать посетителя на покупку, не ставьте на кнопку просто «Купить», если отсутствуют цена, условия оплаты, доставка и преимущества товара. Предоставьте контекст и логичное объяснение действия.

Сколько кнопок размещать на одностраничном сайте?

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

Если на лендинге слишком много кнопок, посетитель начинает теряться, его внимание рассеивается, и он может упустить главное действие. Идеально – одна кнопка на экран.

Добавлять кнопки в каждый блок стоит лишь тогда, когда это логично и уместно по смыслу.

Какие распространенные ошибки при создании кнопок?

Наиболее типичные промахи при работе с CTA:

• Повторение одной и той же кнопки по всей странице. Например, «Получить консультацию» встречается 5 раз подряд без альтернативных вариантов. Каждая кнопка должна нести уникальное сообщение.

• Использование «агрессивных» слов: «Отправить», «Купить», «Оформить», «Запросить» – они вызывают ощущение давления и неопределенности.

• Несоответствие заголовка формы и текста призыву к действию (CTA).

• Слишком длинный текст на кнопке.

• Кнопка теряется на фоне дизайна: очень маленькая, чрезмерно большая или необычной формы. Такие элементы не дают конверсии.

• Элементы интерфейса, которые выглядят как кнопки, но ими не являются: изображения, блоки, плашки. Они могут сбивать пользователя с толку.

• Полупрозрачные или контурные кнопки без заливки часто используют в минималистичных интерфейсах, но их кликабельность ниже, чем у контрастных кнопок.

Кнопки для сайта – это не просто визуальные объекты. Они создают ощущение уверенности у пользователя и направляют его по интерфейсу. Чтобы сайт был эффективным, делайте кнопки заметными, понятными и функциональными.

Источник изображения на шапке: shutterstock.com

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Последние статьи этого автора:

• Адаптивная верстка сайта: гайд для начинающих
• Анкор ссылки: виды, правила составления, влияние на продвижение
• Белая раскрутка сайта без перехода на темную сторону