Кнопка для сайта красивая: Красивые кнопки для сайта HTML + CSS — 24 готовых варианта — Независимое театральное объединение "Зрительские симпатии"

Содержание

Как кнопку сделать ссылкой? | WebReference

Непосредственно кнопку нельзя сделать ссылкой, HTML запрещает комбинировать между собой элементы <button> (а также <input>) и <a>. Таким образом нельзя вкладывать кнопку в ссылку, а ссылку в кнопку. Есть три способа, как сделать так, чтобы при щелчке по кнопке происходило открытие веб-страницы.

Использование HTML

Кнопку <button> вкладываем внутрь элемента <form> и для формы указываем атрибут action с адресом веб-страницы (пример 1). Дополнительно можно добавить атрибут target со значением _blank, тогда веб-страница откроется в новой вкладке браузера.

Пример 1. Атрибут action

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Кнопка</title> </head> <body> <form action=»page/new.html» target=»_blank»> <button>Переход по ссылке</button> </form> </body> </html>

В этом примере при щелчке по кнопке открывается веб-страница new. html в новой вкладке.

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

Использование CSS

Раз кнопку нельзя сделать ссылкой, то вообще отказываемся от <button> и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 2 показан класс btn, при добавлении его к элементу <a> ссылка меняет своё оформление.

Пример 2. Стилизация ссылки

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Кнопка</title> <style> .btn { display: inline-block; /* Строчно-блочный элемент */ background: #8C959D; /* Серый цвет фона */ color: #fff; /* Белый цвет текста */ padding: 1rem 1.5rem; /* Поля вокруг текста */ text-decoration: none; /* Убираем подчёркивание */ border-radius: 3px; /* Скругляем уголки */ } </style> </head> <body> <a href=»page/new.html»>Переход по ссылке</a> </body> </html>

Результат данного примера показан на рис.

Рис. 1. Стилизация ссылки

Использование JavaScript

Для перехода к указанной веб-странице можно воспользоваться событием onclick, добавляя его к элементу <button>. Внутри onclick пишем document.location, а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.

Пример 3. Событие onclick

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Кнопка</title> </head> <body> <button>Переход по ссылке</button> </body> </html>

СсылкиФормы

См. также

<button>
<form>
Кнопки
Кнопки в Bootstrap 4
Отправка данных формы
Построение форм
Событие onclick
Сумасшедшие формы
Формы
Формы в Bootstrap 4

Кнопки HTML

Кнопка — самый часто используемый элемент WEB. Её HTML-код очень простой, и сейчас я вам покажу как он пишется и расскажу, что означают его символы и буквы.

В предыдущей статье мы научились создавать рамки.

В этой статье я покажу Вам несколько вариантов html кода для кнопок которые создаются при помощи тега button.

Тег button — встраиваемый элемент. Его можно вставить в любую строку кода или текста.

Вместе с тем его можно вставить в любой блочный элемент, например теги (p или div)

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

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Кнопки HTML</title> </head> <body> <p><button>Кнопка</button></p> </body> </html>

А вот результат, можно пощёлкать. Тег button по умолчанию создаёт интерактивную кнопку.

Следующую кнопку сделаем с применением тегов таблиц.
Код:

<p><button> <table border="1"> <tr> <td>Кнопка</td></tr></table></button></p>

Результат:

Кнопка

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

Оформление кнопки

Дальше немного интереснее, так как в следующем примере мы в тег button, введём атрибут style и сможем использовать стилевые свойства.

А это значит, что кнопке можно будет придать более оригинальное оформление.

Код:

<button>Кнопка</button>

Результат действующий, можно пощёлкать, и посмотреть, как кнопка работает.

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

1. background: #fdeaa8; — цвет кнопки;

2. width: 80px; — ширина кнопки;

3. height: 40px; — высота кнопки;

4. border-radius: 5px; — закруглённые уголки, если вместо 5px поставить 50%/50%, то кнопка станет округлой;

5. box-shadow: 0px 1px 3px; — создаёт тень, делает кнопку более выпуклой;

6. font-size: 20px; — размер текста;

В тег button можно вставить и картинку.

Код:

<button><img src="images/s20.png">Кнопка</button>

Результат:

Ещё один атрибут, который можно применить для кнопки — это title.

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

Обычно в нём указывается место, в которое ведёт данная кнопка.

Код:

<button title="Страница 23"style="border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;"><img src="images/s20.png">Кнопка</button>

Результат:

Как сделать кнопку ссылкой.

Для этого к тегу button применяется событие onclick.

В значении указывается адрес, по которому и будет осуществлён переход. К примеру так:

onclick=»location.href=’https://starper55plys.ru/’;».

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

<button title="Страница 23"border-radius: 5px; box-shadow: 0px 1px 3px; font-size: 20px;"><img src="images/s20.png">Кнопка</button>

Теперь можно этой кнопкой перенаправлять посетителя на другую страницу сайта, или на другой сайт.

Если расположить несколько button в строку друг за другом, то получится вот такое меню, которое можно использовать как постраничную навигацию.

Ссылка вместо кнопки

Если не использовать кнопку в скриптах, то её можно сделать практически из любого тега, например из ссылки <а></а>.

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

Вот самая простая форма, которую можно придать ссылке

<a href="*">Кнопка</a>

Кнопка

А вот как придать ей интерактивность трансформацию и анимацию, смотрите в статье Кнопки CSS с оригинальными эффектами

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Перемена

Настоящий еврей зарабатывает тысячу долларов в месяц, две тысячи отдает жене, а на оставшиеся три живет сам.

Рамки html < < < В раздел > > > Красивая заглавная буква и бегущая строка HTML

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.

Разработка кнопок для Интернета

Кнопки для Интернета являются неотъемлемой частью взаимодействия с пользователем. Их цель — вдохновить на конверсию и действие человека по ту сторону экрана. Но когда они плохо реализованы — будь то дизайн или копия — они могут вообще не привлечь внимания.

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

Спасибо за то, что так легко перейти на бесплатную учетную запись. Такое редко можно увидеть в мире SaaS, и мне хочется вернуться к вашему программному обеспечению. Я принимаю множество решений, основываясь на честности компаний, а не только на характеристиках. Это выделяет вас. Спасибо!
Барнабас Хелми, генеральный директор и основатель SmashToast, Inc.

Узнать больше

Почему кнопки важны в UX?

По данным Якоба Нильсена и Nielsen Norman Group, пользователи читают примерно 20-28% веб-страницы при поиске информации, и Нильсен считает, что 20% более вероятны.

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

Итак, какое место в этом уравнении занимают кнопки?

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

Веб-кнопки на протяжении многих лет

Как мы знаем, веб-дизайн сильно изменился за десятилетия. Загроможденные страницы с текстом и изображениями, анимированные гифки «в разработке» и навигация по i-frame остались в прошлом. Хотите прогуляться во времени? Посмотрите это ностальгическое путешествие по прошлому Интернета.

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

Когда плоский дизайн стал популярным в веб-мире в 2012 и 2013 годах, кнопки начали терять свои закругленные углы, тени и градиенты. Смартфоны, такие как Android и iPhone, также начали подхватывать тенденции плоского дизайна.

К 2015 году у плоского дизайна все еще был дом, но веб-дизайнеры начали возвращаться к тому, чтобы «кнопки выглядели как кнопки», используя тени или градиенты, чтобы они выглядели «кликабельными». По состоянию на 2019 год мы все еще на этой арене.

Хотите узнать больше об эволюции веб-кнопок? Посмотрите эту временную шкалу с примерами из Dribbble.

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

Дизайн кнопки в различных ее состояниях так же важен, как и ее внешний вид.

Рассмотрим состояния кнопок, такие как :

Активный или отключенный
FOCUSED
HOVER
Выбранный

Активные кнопки или кнопки инвалидов

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

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

Кнопки фокусировки

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

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

Кнопки состояния наведения

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

Выбранные кнопки

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

Выбранные кнопки в качестве ползунков

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

Дизайн — это только часть того, что делает кнопку хорошей в Интернете. И действительно, в дизайне не так много правил, если он доступен, последователен и работает для ваших пользователей. Но прошли те времена, когда текст «нажмите здесь» и кнопкам не хватало последовательного стиля и подхода. Примите во внимание эти рекомендации при разработке своих веб-кнопок в 2020 году.

Придерживайтесь своего дизайна и документируйте его

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

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

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

Кнопки также можно интерпретировать как ссылки в тексте. Опять же, выбор того, как текстовые ссылки будут отображаться и функционировать, также должен быть отражен в вашем руководстве по стилю.

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

Не полагайтесь только на значки в качестве кнопок

Значки могут быть великолепны, если они являются частью руководства вашего бренда. При правильном использовании они могут быть понятными и преодолевать языковые барьеры. Однако будьте осмотрительны в использовании иконок.

По словам Авроры Харли из Nielsen Norman Group, «понимание пользователем значка основано на предыдущем опыте. Из-за отсутствия стандартного использования для большинства значков текстовые метки необходимы для передачи значения и уменьшения двусмысленности».

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

Используйте четкую, доступную копию

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

Короче говоря, глаголы — например, «Отправить», «Отправить», «Начать» — лучше всего подходят для активных кнопок.

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

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

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

При проектировании

учитывайте размеры кнопок (и досягаемость)

Знаете ли вы, что средняя человеческая рука составляет 7,6 дюйма в длину и 3,5 дюйма в размахе? Может быть, нет, но вы можете знать, почему это важно.

Размер кнопок и их расположение на экранах смартфонов и мобильных устройств во многом влияет на UX.

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

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

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

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

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

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

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

Измерьте влияние ваших кнопок

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

Но как именно вы можете эффективно протестировать кнопки на своем веб-сайте?

Лучший способ протестировать кнопки, особенно в CTA, — это A/B-тестирование. A/B-тестирование позволяет настроить два подхода к CTA и проверить эффективность каждого, чтобы увидеть, какие варианты лучше всего находят отклик у реальных людей.

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

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

Кнопки мощные, если их правильно использовать

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

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

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

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

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

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

Идеи дизайна веб-кнопок

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

1. Хороший дизайн кнопки веб-сайта

• Четкость: Надписи и цвета кнопок должны быть четкими, четкими и легко читаемыми. В последние годы дизайн с плоскими кнопками стал популярной тенденцией веб-дизайна, так что это безопасный стиль, который стоит попробовать. Избегайте использования замысловатых ярких кнопок, которые могут отвлечь читателей.

• Краткий: На кнопках идеально использовать минимальный текст. Идея состоит в том, чтобы использовать только одно или два слова. Больше становится неудобным и вызывающим недоумение. Сделайте передышку и спросите себя: «Что я хочу, чтобы читатель сделал прямо сейчас на странице?» Первое слово, которое приходит на ум, почти наверняка глагол. Для короткой и лаконичной формулировки кнопки добавьте после нее наречие времени.

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

2. Плохой дизайн кнопки веб-сайта

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

• Без цвета: Яркие жирные кнопки хорошо работают в качестве призывов к действию, поскольку они привлекают внимание посетителя к важным аспектам страницы. Имейте в виду, что ваш веб-сайт — это путешествие, и кнопки, которые вы на нем устанавливаете, должны служить картой. Ваши читатели могут столкнуться с трудностями при просмотре страницы и конвертации, если вы не используете полноцветные кнопки.

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

Дизайн кнопки веб-сайта Вдохновение

Изображение взято с веб-сайта пользователя Strikingly

самый смысл для вашего сайта.

1. Упростите себе жизнь

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

2. Убедитесь, что контраста много

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

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

3. Используйте цвет

Изображение взято с веб-сайта пользователя Strikingly

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

4. Создайте микрокопию, вызывающую предвкушение

Не допускайте этой ошибки: слова «Нажмите здесь» написаны на кнопке. (Разве это не звучит как спам?) Микроскопия дизайна кнопки должна дать пользователю четкое представление о том, что произойдет, когда он нажмет на нее. Сообщите пользователям, что они получат дальше. Это может быть так же просто, как нажать «Отправить», чтобы ввести информацию, или щелкнуть ссылку «Подробнее», или просмотреть видео. Сообщите пользователям, что происходит в микрокопии, независимо от того, что это такое. Эта информация может помочь в укреплении доверия пользователей и повышении конверсии за счет действий/взаимодействий, которые люди находят привлекательными.

5. Используйте тонкую анимацию для привлечения аудитории

Веб-сайты все чаще используют две кнопки рядом друг с другом в дизайне кнопок. Один наполненный, а другой призрачный. Оба имеют движение наведения, которое привлекает внимание к двум интерактивным опциям. Использование анимации может помочь привлечь внимание к дизайну кнопок веб-сайта и, возможно, побудить людей нажимать на них. Анимации при наведении на кнопки стали частым поведением пользователей, и они служат прямым сигналом для пользователей, что они должны быть вовлечены. Только не переусердствуйте. Кнопки, которые крутятся, крутятся и мигают, скорее раздражают, чем приносят пользу.

6. Увеличить достаточно, чтобы нажать

Изображение взято с веб-сайта пользователя Strikingly

Кнопки должны иметь кликабельную область диаметром не менее 10 миллиметров, но всегда допустимо больше. Этот совет исходит из исследования Touch Lab Массачусетского технологического института, в котором изучался размер подушечек пальцев по отношению к сенсорным устройствам. Давайте поместим это в контекст. На физической клавиатуре компьютера типичный размер клавиши составляет 15 на 15 миллиметров. Это отличная цель. (Просто имейте в виду, что при разной ширине экрана ваша кнопка исчезнет на маленьких устройствах.) Если вам необходимо использовать маленькие кнопки, попробуйте сделать для них большой радиус щелчка. Если пользователь пропустит сами кнопки, вокруг них все равно будет достаточно места для выполнения предполагаемого действия. (Посетители вашего сайта это оценят.)

7. Используйте стиль, с которым вы уже знакомы

Каждый знаком с несколькими различными типами дизайна кнопок веб-сайтов. Воспользуйтесь одним из них.

Закрашенная прямоугольная кнопка с прямыми углами и текстом внутри
Закрашенная прямоугольная кнопка с закругленными краями и текстом внутри
Прямоугольная кнопка с заливкой и заметной тенью (вверху)
Прямоугольная призрачная кнопка

8. Разместите в предсказанном месте

Изображение взято с веб-сайта пользователя Strikingly

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

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

9. Не забывайте оставлять отзывы

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

10. Используйте кнопки намеренно

Когда кнопок слишком много, начинается хаос. Где уместны кнопки, используйте их. Не делайте дизайн слишком громоздким, разбрасывая кнопки повсюду. Пользователи не будут уверены, куда нажимать и что важнее всего. Чтобы использовать с целями веб-сайта, сохраните кнопки. Они должны направлять посетителей к наиболее важным частям вашего общего дизайна.

Как сделать привлекательный дизайн кнопки веб-сайта?

Хотите сделать кнопку для сайта, но не знаете как? Вы покрыты Поразительно. Вы можете разработать кнопки электронной коммерции с помощью Strikingly, которые понравятся вашим клиентам и побудят их покупать ваши товары. Стоит отметить, что вы можете изменить опцию «Купить сейчас» на «Забронировать сейчас». Индивидуальный стиль кнопки и параметры выравнивания были расширены! Чтобы выделить кнопку, увеличьте ее или измените цвет. Вы также можете изменить шрифт кнопки в теме вашего сайта.

Как кнопку сделать ссылкой? | WebReference

Использование HTML

Использование CSS

Использование JavaScript

См. также

Кнопки HTML

Разработка кнопок для Интернета

Почему кнопки важны в UX?

Веб-кнопки на протяжении многих лет

Активные кнопки или кнопки инвалидов

Кнопки фокусировки

Кнопки состояния наведения

Выбранные кнопки

Придерживайтесь своего дизайна и документируйте его

Не полагайтесь только на значки в качестве кнопок

Используйте четкую, доступную копию

При проектировании

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

Измерьте влияние ваших кнопок

Кнопки мощные, если их правильно использовать

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

Добавить комментарий Отменить ответ