Дизайн кнопок веб-сайта: руководство по CSS. Часть 1

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

Как отличить хороший дизайн от плохого? 

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

Параметры хорошего дизайна

1. Четкость: текст и цвета кнопок должны быть четкими и понятными. Избегайте сложных, причудливых кнопок, которые могут отвлекать пользователей от важного контента.
2. Краткость: используйте минимум текста на кнопках. Мы рекомендуем одно, максимум два слова. При большем количестве слов ваш дизайн будет громоздким и запутанным.
3. Контекст: пользователь должен понимать, за что отвечает кнопка и куда она его направляет. Если у вас есть кнопка с надписью «Купить сейчас», она должна вести на страницу, где пользователь может ввести данные своей карты для покупки, а не на страницу с описанием продукта.

Параметры плохого дизайна 

1. Отсутствие отзывчивости: ваша кнопка должна хорошо отображаться как в мобильной версии, так и в десктоп. Кнопка должна соответствовать размерам экрана устройства пользователя. У большинства инструментов CMS есть кнопка-переключатель, с помощью которой вы можете проверить, как элементы отображаются на веб-страницах. 
2. Отсутствие цвета: яркие и крупные кнопки отлично подойдут для призывов к действию, потому что они обращают внимание пользователя на ключевые элементы страницы. Без полноцветных кнопок вашим пользователям будет сложно исследовать вашу веб-страницу и совершить конверсию.
3. Неуместное расположение: ваши кнопки должны располагаться в правильных областях. Например: рядом с разделом функций и преимуществ, в заголовке и внизу страницы.

Идеи дизайна кнопок

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

Vecteezy

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

Freepik

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

Как создать кнопку на сайте?

Для создания кнопки на сайте лучше всего использовать CSS-редактор. CSS (каскадные таблицы стилей) — это инструмент, который определяет и описывает, как элементы отображаются в HTML. 

С помощью редактора CSS можно настроить любую деталь вашей веб-страницы — от верхних и нижних колонтитулов до боковых панелей и кнопок.

Давайте подробнее рассмотрим, как создать кнопку на сайте с помощью WordPress. Эта платформа упрощает доступ, добавление и настройку параметров CSS, а также создание новых кнопок.

Шаг 1. Перейдите на панель инструментов WordPress и нажмите «Внешний вид» > «Настроить».

Источник изображения

Шаг 2. Затем перейдите в нижнюю часть левой боковой панели и нажмите «Дополнительные CSS».

Источник изображения

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

Источник изображения

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

^{Источник: hubspot.com}