Красивые кнопки для сайта: правила создания и нюансы расположения
Что такое красивые кнопки для сайта? Кто-то скажет, что они должны быть яркими и привлекать внимание. И если со второй частью этого утверждения нельзя не согласиться, то первая – это настоящее минное поле. Ведь если переборщить, то посетитель просто покинет страничку и никогда больше не вернется.
Нельзя забывать о функциях и расположении кнопок. Разместив красивую кнопку в нелогичном месте или забив дизайн бесполезными элементами, можно вызвать у пользователя отторжение. В нашей статье мы расскажем, как создать красивую кнопку для сайта и какие правила для этого существуют.
Задача кнопок для сайта
Назначение кнопок на сайте очевидно и не требует пояснений: они нужны для того, чтобы на них нажимали. Яркая, привлекательная кнопка гораздо эффективнее, чем малозаметная тусклая текстовая ссылка. Конечно, мера нужна во всём: страница, переполненная кнопками разных цветов, да ещё и анимированными, просто пугает пользователя. Не понимая, как ориентироваться в этом интерфейсе, он закроет ресурс, так и не совершив ни одного целевого действия.
Поэтому такой элемент интерфейса, как кнопка, должен расходоваться экономно: в видимой области экрана допускается не более двух кнопок. Действия, за которые они отвечают, должны быть ясны пользователю с первого взгляда.
Кнопки для сайта делятся на две разновидности, и каждая верстается своим HTML-тегом:
- Кнопка-ссылка, создаваемая при помощи тега . Эта красивая кнопка на сайте привлекает внимание к объекту, мотивирует перейти на нужную страницу.
- Кнопка-действие. Чтобы добавить на сайт кнопку этого типа, можно использовать тег или (обычно выбирают первый, его легче настраивать). Это кнопка, отвечающая за конкретное действие: отправку формы, открытие модального окошка, скачивание файла и т. п.
Внешне они могут совершенно не отличаться (если настройки CSS одинаковые), но между ними есть принципиальная техническая разница: только у ссылочного тега имеется атрибут 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. В модальных окнах целевую кнопку лучше ставить в правую часть.
«Заказать», «Оплатить», «Отправить» и прочие кнопки сработают лучше, будучи помещенными в правой части окна.
Кнопки, расположенные слева, привлекают внимание раньше, но, поскольку пользователь ещё не просмотрел всё до конца, он не нажимает на кнопку. А когда он ознакомился со всеми опциями, его взгляд уже подошёл к кнопке альтернативного выбора, и проще кликнуть на неё, чем возвращаться и искать первую.
Поэтому оптимален следующий порядок: слева – кнопка второстепенной опции, справа в конце – конверсионная.
Создание красивой кнопки для сайта
Для кнопок, которые не просто перебрасывают пользователя на другую страницу, а что-либо делают (отправляют данные из формы, очищают заполненные поля, открывают попап, загружают файл и т. п.), лучше применять тег :
У него есть необязательный атрибут type – тип кнопки, принимающий значения трёх типов:
type: button | submit | reset
В принципе, его можно не прописывать вообще. Но если это кнопка в форме, то по умолчанию браузер интерпретирует любой как и по клику отправляет данные из формы.
Есть мнение, что этот тег должен находиться непременно внутри тега . Это не совсем так. Если вы хотите разместить на сайте красивую кнопку за пределами формы, данными из которой она оперирует, просто добавьте ей атрибут form с id вашей формы, и всё будет работать корректно.
Есть и другие атрибуты у :
- 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).
Теперь давайте попробует создать для сайта две красивые кнопки разного типа: ссылочную с тегом , ведущую на страницу регистрации, и целевую с тегом , открывающую модальное окно. Оформим их в одном стиле.
Если вам нужна иконка внутри кнопки, реализуйте её вывод с помощью иконочного шрифта FontAwesome. Для самой кнопки выберите гарнитуру Roboto – она отлично подходит и для латинских, и для кириллических текстов.
Как оформлять в сss кнопки для сайта
От автора: приветствуем вас на страницах нашего блога. При создании веб-страниц огромную роль играют кнопки, с помощью которых осуществляются различные действия. Сегодня давайте подумаем, как их создавать и оформлять. Оформить в css кнопки для сайта на самом деле несложно, мы рассмотрим несколько типичных способов.
Как создаются кнопки
Во-первых, хотел бы начать с того, что сами кнопки можно создавать по-разному. Тут все зависит скорее от того, с какой целью она нужна. Конечно, для отправки формы, например, нужно создавать ее так:
Но практически для всех остальных целей сгодится и другой вариант. Что вы вообще подразумеваете под кнопками? Многие считают, что это пункты меню или какие-то элементы, щелкнув по которым на сайте что-то меняется, раскрывается или появляется. Такие элементы можно создать следующими способами:
С помощью того же тега input:
Такая кнопочка ничего не будет делать и клик по ней ни к чему не приведет. Ей нужно с помощью скриптов задавать, что же произойдет при клике. Другой вариант создания:
(или span если она должна быть строчным элементом). Естественно, этот вариант хуже тем, что вам придется дополнительно писать некоторые стили для оформления, а input type = “button” уже имеет некоторые по умолчанию.
Конечно, это немного неправильный способ создания. Его стоит использовать лишь тогда, когда нужно сделать независимую от других кнопку, которая не является элементом формы. Третий вариант:
Input поддерживает и такой вид – чисто графический. В этом случае достаточно записать путь к файлу и выбранное изображение станет кликабельным, останется задать, что должно происходить при нажатии. Четвертый вариант:
В html есть парный тег button, который помогает создавать кнопки с различным содержимым. В этом случае преимущество заключается в том, что вы можете вставить любое содержимое непосредственно между открывающим и закрывающим тегом.
Button можно использовать как в форме, так и саму по себе. Если же результат нажатия необходимо отправить на сервер, то тег обязательно должен находиться в контейнере form для корректной работы.
Как сделать красивые кнопки для сайта на css
Что ж, с созданием все понятно, а теперь вернемся к их оформлению. Допустим, мы создали ее с помощью input, что дальше? Если вам нужно изменить внешний вид элемента, то можно воспользоваться разными css-свойствами. Например, давайте пропишем такие:
Большая коллекция кнопки CSS / HTML
Замечательная коллекция кнопок на CSS и HTML с валидным и качественным кодом для современного сайта, чтобы оформить меню, ссылки, вход в профиль, кнопки добавить комментарии (купить, открыть, или пройти на страницу), изменить дизайн перехода на предыдущую страницу, табы и т.д.
Примеры 30 кнопок CSS3, только чистый код (без JS и картинок) , смотрим ниже!
Представляем на dle9.com замечательную коллекцию кнопок на CSS и HTML с валидным и качественным кодом.
Дополнительно рекомендуем обзор с 26 простыми кнопками CSS, HTML, только чистый код (без JS) можно посмотреть, опробовать, по-нажимать и увидеть наглядный результат.
Как сделать кнопку на CSS
Страница с примерами ниже, красивых и современных вариантов кнопок только на CSS и HTML
Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.
Если кому интересно читаем тут описание, из каких элементов и тегов состоит кнопка для сайта или пропускаем смотрим примеры ниже.
Самый простой способ изменить цвет, шрифт, размер, тень, градиент и другие стили кнопки HTML не нарушая целостности кода, воспользоваться супер инструментов вашего браузере. Подойдет для этих целей Мозила, Опера, Гугл Хром, Яндекс.Браузер и другие программы в которых встроен инструмент «Веб-разработка».
Как пользоваться инструментом «Веб-разработка Firefox Mozilla» подробно инструкция в картинках.
Простая HTML кнопка для сайта может содержать значение input, при создание кнопки с тегом button по своему действию напоминает результат, получаемый с помощью тега input (с атрибутом type=»button | reset | submit»). Функционально и внешне они относительно одинаковы. Внутри тега button каждый вебмастер может добавить отформатированный текст, или подходящее изображение. Различаются эти элементы и кнопки с применением тега input (c атрибутом type = «button») несколькими параметрами.
Главным отличием тега button, это расширенные возможности по созданию кнопок HTML. Например, вы можете размещать любые элементы HTML и изображения. Применив стили, можно изменить внешний вид кнопки, шрифт, цвета фона, градиент, размеры и другие параметры.
Когда применяется тег button?
- тег button в качестве открывающегося и закрывающегося значения, может включать дочерние теги,
- если текст на кнопке один, то применяется значение value, а при нажатие на копку может передаваться другой.
Как изменить вид кнопки при наведении, сделать эффект нажатия? Динамические эффекты вы сможете реализовать с помощью псевдоклассов:
:hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
:active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
:focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.
Сложнее всего сделать и продумать вид, задать параметры, понять, как должны изменяться эффекты во время нажатия кнопки, не нарушая целостность дизайна или вёрстки страницы. Чаще всего самый простой внешний вид, выглядит более стильно, чем навороченная с крутыми элементами и цветом кнопка. Большая коллекция кнопки CSS / HTML
Оформление кнопок CSS
Красивое оформление ссылок и кнопок на примере кнопок Yahoo, Google, Facebook с поддержкой разных состояний при наведение на стилизированные кнопки курсора, нажатие кнопки или попадание в фокус.
Скругленная кнопка
Link Button Disabled HTML код кнопки с круглыми краями
CSS код кнопок с круглыми краями
Двойная рамка
Link Button Disabled HTML код кнопок с двойной рамкой
CSS код кнопок с двойной рамкой
Стилизация кнопок Yahoo
Link Button Disabled HTML код стилизации кнопок Yahoo
CSS код стилизации кнопок Yahoo
Стилизация кнопок Google
Link Button Disabled HTML код стилизации кнопок Google
CSS код стилизации кнопок Google
Стилизация кнопок Facebook
Link Button Disabled HTML код стилизации кнопок Facebook
CSS код стилизации кнопок Facebook
С другими вариантами оформления кнопок на CSS можно ознакомиться здесь.
- CSS / HTML
- FrontEnd (ФронтЭнд)
Помогла ли вам статья?