Красивые кнопки для сайта: правила создания и нюансы расположения

Что такое красивые кнопки для сайта? Кто-то скажет, что они должны быть яркими и привлекать внимание. И если со второй частью этого утверждения нельзя не согласиться, то первая – это настоящее минное поле. Ведь если переборщить, то посетитель просто покинет страничку и никогда больше не вернется.

Задача кнопок для сайта

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

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

Кнопки для сайта делятся на две разновидности, и каждая верстается своим HTML-тегом:

• Кнопка-ссылка, создаваемая при помощи тега <a>. Эта красивая кнопка на сайте привлекает внимание к объекту, мотивирует перейти на нужную страницу.
• Кнопка-действие. Чтобы добавить на сайт кнопку этого типа, можно использовать тег <button> или <input> (обычно выбирают первый, его легче настраивать). Это кнопка, отвечающая за конкретное действие: отправку формы, открытие модального окошка, скачивание файла и т. п.

Внешне они могут совершенно не отличаться (если настройки CSS одинаковые), но между ними есть принципиальная техническая разница: только у ссылочного тега <a> имеется атрибут href – то, куда нужно перейти по ссылке. Если забыть прописать href, то вид курсора не будет при наведении меняться на pointer.

Преимущества красивой кнопки перед ссылкой

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

Комментарий эксперта

«Мы обязаны делать клиентов довольными
любыми доступными способами!»

Алексей Молчанов,
основатель международной IT-компании Envybox

Текущая ситуация в стране и мире с каждым днем набирает все больше и больше оборотов.

Сегодня каждый предприниматель задается вопросом: “А что же сейчас будет с моим бизнесом?”

Если вы поддадитесь всеобщей панике и “заморозите” деятельность компании, то ни к чему хорошему это не приведет. Если вы видите, что кризис неизбежен и доход компании уже начинает сокращаться — не приостанавливайте свою деятельность. Ни в коем случае не сокращайте расходы на рекламу и не прекращайте продвижение (если вас, конечно, не закрыли из-за Постановления правительства).

Направляйте максимум усилий и внимания на продвижение своей компании и увеличение потока новых клиентов.

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

Ниже вы можете скачать чек-лист из простых и доступных для любой компании инструментов привлечения стабильного потока новых клиентов или возвращения существующих. А также в качестве бонуса получить бесплатное использование наших сервисов для увеличения заявок с сайта в течение 7 дней и 30% скидку на их подключение. Желаем вам удачи, новых клиентов и больших продаж!

СКАЧАТЬ ЧЕК-ЛИСТ
+ БОНУС

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

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

Важные действия, как правило, связаны для юзера с необходимостью приложить усилия: завести учётную запись на портале, заполнить форму, написать комментарий, купить товар. Для менее важных действий и усилий требуется меньше (например, для перемещения между страницами и пассивного чтения материалов).

9 правил использования красивых кнопок для сайта

1. Размещать кнопки в удобных и привычных для пользователя местах.

Имейте в виду, что эффективность сайта зависит не только от местоположения, но и от порядка следования кнопок, особенно если это кнопки парные («вперёд» и «назад», например). Визуально подчеркните целевое или самое основное действие пользователя.

2. Кнопки на сайте красивы и соответствуют контексту.

Кнопки не должны выбиваться из общего дизайна сайта и фирменного стиля бренда! Выбирайте цветовую гамму и стилистику осознанно.

Так, если ваш интерфейс построен на принципах flat design, не добавляйте в него «стеклянных» объёмных кнопок в стиле Apple. Обыгрывайте в дизайне особенности логотипа, подбирайте правильные формы, цвета, типографику.

3. Второстепенное должно быть менее заметно.

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

4. Осторожнее с размытыми тенями.

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

5. Единый стиль для элементов второго, третьего, четвертого порядка.

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

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

6. Будьте аккуратны с кнопками-призраками.

Это кнопки, состоящие только из обводки и границы одного цвета (фон при этом прозрачен). Они могут исчезнуть, и это не фигура речи, а факт, подтверждённый исследованиями в области юзабилити: юзеры их не всегда замечают, а иногда не могут прочесть надпись на них. Вписывать их в интерфейс сложнее, чем обычные html-кнопки для сайта (с красивой непрозрачной заливкой).

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

7. Не подписывайте кнопку «ОК» или подобным образом.

Простые кнопки типа «Да», «Нет», «Cancel», «OK» и другие, ежедневно нажимаемые нами в интерфейсе ПК, не подходят для дизайна сайтов, поскольку никак не описывают действие, совершаемое пользователем. Чтобы проще было отслеживать метрики, связывайте СТА c конверсионным действием и подписью кнопки.

8. Оптимальное место для целевой кнопки – нижний правый угол страницы.

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

9. В модальных окнах целевую кнопку лучше ставить в правую часть.

«Заказать», «Оплатить», «Отправить» и прочие кнопки сработают лучше, будучи помещенными в правой части окна.

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

Создание красивой кнопки для сайта

Мы уже говорили, что сверстать красивую кнопку для сайта можно посредством html-тегов <input>, <a> и <button>. У них разная логика работы и набор атрибутов, поэтому и используются они для различных целей.

Чтобы оформить ссылочный тег <a> как кнопку, нужно просто дописать нужные стили в CSS. Разметка будет выглядеть примерно так:

Для кнопок, которые не просто перебрасывают пользователя на другую страницу, а что-либо делают (отправляют данные из формы, очищают заполненные поля, открывают попап, загружают файл и т. п.), лучше применять тег <button>:

У него есть необязательный атрибут type – тип кнопки, принимающий значения трёх типов:

type: button | submit | reset

В принципе, его можно не прописывать вообще. Но если это кнопка в форме, то по умолчанию браузер интерпретирует любой <button> как <button type=”submit”> и по клику отправляет данные из формы.

Есть мнение, что этот тег должен находиться непременно внутри тега <form>. Это не совсем так. Если вы хотите разместить на сайте красивую кнопку за пределами формы, данными из которой она оперирует, просто добавьте ей атрибут form с id вашей формы, и всё будет работать корректно.

Есть и другие атрибуты у <button>:

• autofocus: установка фокуса на кнопку по умолчанию, как только загрузится страница;
• disabled: блокировка кнопки (на неё нельзя нажать, она ничего не делает);
• formaction (только в сочетании с типом submit): здесь прописывается URL обработчика данных из формы;
• formenctype (тоже только для submit): описывает тип данных, которые будут пересылаться в обработчик – application/x-www-form-urlencoded, multipart/form-data или text/plain;
• formmethod (только для submit): это HTTP-метод отправки данных. Принимает значения get/post;
• formtarget (только для submit): окно или фрейм, где будет выведен результат (_self, _blank, _top, _parent либо name фрейма);
• name: имя (необходимо для форм с несколькими кнопками, позволяет отслеживать, которая из них нажата);
• value: значение (по сути, этот атрибут аналогичен name).

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

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

Добавляем кнопке живость – заставляем её реагировать на наведение мыши изменением цвета: при наведении она подсвечивается, при клике – как бы прогибается внутрь и темнеет.

На этом всё! Вы сделали две красивые кнопки для своего сайта.

8 ошибок при создании кнопок для сайта

1. Особая кнопка для сброса данных формы.

Даже самая красивая кнопка Reset на сайте бесполезна: пользователь и так исправит свои ошибки, нет нужды в перезагрузке всей страницы целиком. К сожалению, эти бесполезные кнопки любят помещать слева, и их легко случайно нажать, сбросив все введённые данные и обнулив все усилия. Расстроившись, многие пользователи после этого покидают сайт.

2. Слишком мелкие кнопочки.

Не жалейте места – делайте управляющие элементы крупнее! Они должны бросаться в глаза сразу же, как только человек зашёл на страницу – тогда кнопки на сайте будут не только красивыми, но и эффективными! В первую очередь, это касается кнопок типа «Купить», «Подписаться», «Заказать».

3. Кнопка слилась с фоном.

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

4. Кнопка выглядит слишком нестандартно.

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

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

5. Надпись слишком абстрактна или запутывает пользователя.

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

Ярлык на кнопке не обязан описывать следующее действие, но должен давать хотя бы примерное представление о том, что произойдёт: «Сохранить изменения», «Отправить заказ», «Подписаться на рассылку», «Перейти к списку курсов». Понять смысл действия, если это движение на шаг вперед или назад, помогают символы << и >>.

6. Слишком много кнопок.

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

7. Безымянная кнопка.

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

8. Кнопка с анимацией.

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

При проектировании веб-интерфейса не забудьте и о слабовидящих посетителях сайта. И всегда логично подписывайте кнопки.