Кнопку. Дизайн кнопок: ключевые правила и рекомендации для эффективного интерфейса

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

Ключевые принципы эффективного дизайна кнопок

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

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

Как правильно подобрать цвет кнопки

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

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

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

Оптимальный размер и форма кнопок

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

• Минимальный рекомендуемый размер 44×44 пикселя для мобильных интерфейсов
• Для десктопов оптимально 36-50 пикселей в высоту
• Прямоугольная форма с небольшими скругленными углами наиболее привычна
• Размер должен быть пропорционален важности действия

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

Какой текст использовать на кнопках

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

• Используйте глаголы действия — «Купить», «Загрузить», «Подписаться»
• Делайте текст кратким и понятным
• Избегайте общих фраз вроде «Отправить» или «Продолжить»
• Используйте личные местоимения — «Получить мою скидку»
• Добавляйте призыв к срочности — «Купить сейчас»

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

Визуальная обратная связь при взаимодействии

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

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

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

Типичные ошибки в дизайне кнопок

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

• Слишком мелкий размер, затрудняющий нажатие
• Недостаточный контраст с фоном
• Неинформативные надписи («Нажми», «Ок»)
• Отсутствие визуальной обратной связи
• Непонятное расположение на странице
• Смешивание стилей кнопок в рамках одного интерфейса

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

Тестирование и оптимизация дизайна кнопок

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

1. Проведите A/B тестирование разных вариантов дизайна
2. Анализируйте поведение пользователей с помощью тепловых карт
3. Собирайте обратную связь от реальных пользователей
4. Отслеживайте конверсии для оценки эффективности
5. Регулярно пересматривайте дизайн с учетом новых данных

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

Тег | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	6.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <button> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <input> (с атрибутом type=»button | reset | submit»). В отличие от этого тега, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

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

Синтаксис

<form>
  <button>...</button>
</form>

Атрибуты

accesskey

Доступ к элементам формы с помощью горячих клавиш.

autofocus

Устанавливает, что кнопка получает фокус после загрузки страницы.

disabled

Блокирует доступ и изменение элемента.

form

Связывает между собой форму и кнопку.

formaction

Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.

formenctype

Способ кодирования данных формы.

formmethod

Указывает метод пересылки данных формы.

formnovalidate

Отменяет проверку формы на корректность.

formtarget

Открывает результат отправки формы в новом окне или фрейме.

name

Определяет уникальное имя кнопки.

type

Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы.

value

Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BUTTON</title>
 </head>
 <body>
  <p><button>Кнопка с текстом</button>
  <button><img src="images/umbrella.gif" alt="Зонтик" 
         > Кнопка с рисунком</button></p>
 </body>
</html>

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

Рис. 1. Вид кнопок в браузере Safari

Браузеры

Internet Explorer до версии 7. 0 включительно не поддерживает атрибут value.

Правила дизайна хорошей кнопки — Дизайн на vc.ru

{«id»:144961,»url»:»https:\/\/vc.ru\/design\/144961-pravila-dizayna-horoshey-knopki»,»title»:»\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/144961-pravila-dizayna-horoshey-knopki»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/144961-pravila-dizayna-horoshey-knopki&title=\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.

com\/intent\/tweet?url=https:\/\/vc.ru\/design\/144961-pravila-dizayna-horoshey-knopki&text=\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/144961-pravila-dizayna-horoshey-knopki&text=\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/144961-pravila-dizayna-horoshey-knopki»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438&body=https:\/\/vc. ru\/design\/144961-pravila-dizayna-horoshey-knopki»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

8421 просмотров

Создание кнопки призыва к действию в редакторе eSputnik

Кнопка призыва к действию (CTA) — это обязательный элемент email-рассылки, который побуждает подписчика перейти на сайт, соцсети и т.д. Создать кнопку в письме с помощью редактора eSputnik очень просто, следуя нашей пошаговой инструкции.

Как сделать кнопку в письме?

1. Два варианта добавления кнопки в письмо:
2. Как изменить дизайн кнопки:
3. Эффект смены цвета кнопки при наведении
4. Адаптивность кнопок
5. Привязка события к кнопке
6. Добавление фонового изображения под кнопку

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

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

Выбираем место в шаблоне, где будет расположена кнопка.

Вариант 1: Создаем кнопку в Структуре с несколькими Контейнерами

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

Вариант 2: Создаём кнопку в отдельной Структуре

• в левом боковом меню во вкладке “Контент” заходим в “Структуры”,

• перетаскиваем мышкой нужную структуру в требуемое место в письме, затем выбираем тип контента, который хотим создать, в данном случае это “Кнопка”.

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

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

Как изменить дизайн кнопки

По умолчанию всегда создаётся кнопка без перелинковки, с надписью “Кнопка” сделанной шрифтом Arial 18 размера, цвет кнопки зеленый #31cb4b, а цвет текста — белый #ffffff. Остальные настройки кнопки по умолчанию следующие:

• Цвет фона — прозрачный

• Закругление 30 px

• Выравнивание по центру

• Границы активированы, для левой, правой и верхней установлены значения 0px, для нижней — 2px.

• Внутренние отступы: левый и правый по 20 px, верхний и нижний — по 10 px.

Как задать стиль одной кнопке

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

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

• Стиль текста (шрифт, размер).

  Рекомендуем использовать стандартные шрифты, чтобы всё отобразилось так, как вы задумали.

• Выравнивание кнопки.

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

• Растянуть по ширине.

  Включайте если вам необходимо, чтобы кнопка СТА была на всю ширину письма. Высота кнопки при этом не меняется.

• Границы.

  Можно задать границы и цвет всей кнопке или поиграться с каждой гранью отдельно.

  Помимо размеров можно задавать форму границ:

• Внутренние отступы, которые проставятся вокруг текста внутри кнопки.

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

• Включать элемент в разные типы писем. Если вы уже отправляете AMP-письма, то для отображения этой кнопки нажмите на ϟAMP.

Пример кнопки после внесения изменений в оформление:

Как задать стили оформления всем кнопкам сразу

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

В оформлении можно задать такие параметры:

Процесс изменения параметров аналогичен описанному выше, только изменения выполняются во вкладке “Оформление”, в разделе “Кнопка”.

Добавление эффекта смены цвета кнопки при наведении

Такая опция позволяет привлечь внимание подписчика к СТА элементу в письме. Для этого активируем функцию “Подсвечивать по наведению” (по умолчанию она отключена).

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

Определяем цвета (в данном случае это черный #000000 и серый #757575) и задаем их в соответствующих полях:

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

Затем задаем закругление кнопки (у нас — почти прямоугольная, радиус закругления устанавливаем небольшой, 5), а также цвет обводки кнопки (если в ней нет необходимости, эту опцию можно не активировать):

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

После всех описанных выше действий кнопка приобрела такой вид:

А при наведении такой:

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

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

Адаптивность кнопки для мобильных

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

Во вкладке “Контент” можно задать факт отображения или скрытия кнопки на мобильных устройствах. Для этого кликните по блоку с кнопкой в письме и в появившемся слева меню выберите нужную опцию в пункте “Скрытие элемента”:

Как привязать событие к кнопке

Можно задать событие, которое будет запускаться по нажатию на кнопку:

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

Читать статью о привязке события к кнопке >>

Как добавить картинку в фоне

Если кнопку нужно изменить, это можно сделать прямо в письме:

1. Выделяете блок с кнопкой

2. Справа во вкладке “Контент” появляются все параметры кнопки, где вы можете изменить то, что считаете нужным:

• Название кнопки,

• Стиль, размер и цвет шрифта,

• Цвет кнопки,

• Радиус закругления,

• Цвет обводки и сам факт ее наличия,

• Выравнивание кнопки в блоке (по центру, по левому или правому краю,

• Внутренние и внешние отступы (внутренние, как мы писали выше, это отступы от текста кнопки до ее границ, внешние — от краев кнопки до границ блока, в котором она расположена).

Для примера изменим вид созданной с помощью стилей кнопки на такой:

1. Сначала определяем цвет. Это #fb2d29. И задаём в настройках: 

2. Увеличиваем внутренние отступы:

• Слева и справа — 40 рх,

• Сверху и снизу — 20 рх.

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

• Перетаскиваем бегунок и активируем функцию “Картинка в фоне”,

• Загружаем выбранную для фона картинку.

Кнопка готова! Если планируете использовать ее и в других письмах, сохраните этот элемент в библиотеке блоков. О том, как это сделать, читайте в нашей статье.

Как создать кнопку: 7 советов, чтобы на нее кликнули

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

Они повсюду: на электронной почте, домашних страницах, различных сайтах, контактных формах и корзинах интернет-магазинов. Большинство из 4 000 000 000 страниц в сети имеют навигационные кнопки.

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

1. Использование слов-побудителей

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

Получается, что, кнопки без глаголов, типа:

• Подписка на рассылку;
• Загрузка описания;
• Дополнительная информация.

… Станут более действенными, когда будет добавлен глагол…

• Подписаться на рассылку;
• Скачать описание;
• Узнать больше.

2. Ваша кнопка соответствует тесту «WYLTIWLT» (Would You Like То? I Would Like То)

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

• Хотели бы вы [текст на кнопке]? (Would You Like То?)
• Я хотел бы [текст кнопки] (I Would Like То).

Иными словами, проверьте, может ли текст в кнопке быть прочитан как бы «от лица сайта», а также от лица посетителя. Если текст в кнопке «Перейти к разделу…», это будет читаться как «Вы хотели бы перейти к разделу…?» и «Я хотел бы перейти к разделу…?». Поскольку в обоих случаях эта фраза логична, то текст в кнопке проходит тест.

Если текст в кнопке «Посмотреть ваши результаты», то, если задать вопрос, получается «Вы хотели бы посмотреть ваши результаты?» и «Я хотел бы посмотреть ваши результаты». Второй вариант здесь не очень подходит, поэтому данный текст не пройдет тест. Этот быстрый способ убедиться в том, что текс на каждой кнопке, начинающийся с глагола, работает от лица маркетолога, a также от лица посетителя сайта. Кстати, каждая кнопка на Фейсбук со словом-действием проходит данный тест!

Такой метод был предложен Джонатаном Ричардсом, который создал эту аббревиатуру: WYLTIWLT.

3. Я или Вы: от первого или от второго лица?

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

Кнопку c местоимением от 1 лица («Создать мою учетную запись») нажимали на 24% посетителей больше, чем на кнопку c местоимением от 2 лица («Создать вашу учетную запись»). Разработчики говорят o том, что надписи в кнопке c местоимением от 1 лица работают лучше, так как они говорят за посетителя, совершающего действие, то есть, от человека, который держит мышь или нажимает на экран.

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

4. Используйте цвета, которые контрастируют c другими элементами

Наши глаза беспрерывно сканируют пространство, ища элементы, на которых взгляд останавливается. Все, что создает контраст c окружением, автоматически привлекает внимание. Такое явление заложено в основе природы нашего зрения и мозга, называется это эффектом Фон Ресторфа.

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

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

 

 

5. Сделайте кнопку большого размера

Актуально для пользователей смартфонов и планшетов. Пользователю должна быть предоставлена возможность комфортно нажимать на кнопку, как co смартфона, так и c планшета. Следовательно, размер кнопки должен быть соответствующим человеческому пальцу. Компания Apple рекомендует минимальный размер кнопок 44×44 пикселей, но исследования компании МIT Touch Lab показывают, что в среднем размер указательного пальца составляет (если перевести на пиксели) 45×57.

Это связано c тем, что кончик пальца имеет не округлую, а овальную форму. А большой палец несколько больше. Если предполагается, что кнопку будет нажиматься большим пальцем (если, к примеру, она будет располагаться в нижней части приложения для планшета), ее можно сделать шире: 45×72 пикселей.

6. Уменьшите уровень вовлечения («Начать шоппинг» вместо «Купить сейчас»)

Ряд действий ведет к взятию на себя бо́льших обязательств, чем другие. Так же и с кнопками – некоторые из них означают больше обязательств. Они могут вызывать разные психологические реакции и доставлять больше беспокойства. Если кнопка-действие побуждает посетителя потерять время или деньги, то он c меньшей вероятностью кликнет по ней. Протестированы языки кнопок для двух «Начать тест» и «Прочитать обзор». Вторая кнопка получила на 124% больше кликов.

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

 

 

7. Создавайте кнопки на основе кода, а не графики

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

У графических кнопок есть ряд проблем.

• Они медленнее грузятся;
• Они недоступны для посетителей с ограниченными возможностями;
• Графические изображения могут не отображаются в email сообщениях, пока не будет нажата кнопка «Показывать изображения».

Кнопки на основе кода подобных проблем не создают. Можно создавать отличные кнопки с помощью НTML и СSS, и поэтому нет ни одного весомого довода, почему лучше делать графические кнопки. Кнопки, созданные на основе НTML или СSS, иногда называют «пуленепробиваемые», потому что они отображаются везде, в том числе и в email.

Если у вас на сайте (в приложении) есть графические кнопки, и возникли проблемы c их редактированием, хотя бы убедитесь, что «Alt» включает надпись на кнопке. Таким образом, она будет видна в email сообщениях, даже если абонент не включил загрузку изображений.

 

Нажатие кнопки

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

Дизайн кнопок. Все, что вы хотели узнать

12 советов о дизайне кнопок в интерфейсе

1. Различайте кнопки и ссылки. У них разное предназначение. Их схожесть в интерфейсе будет путать пользователя.

2. Продумайте варианты состояния кнопок. Активна ли она, будет ли подсвечиваться при наведении? Поймёт ли пользователь, что кнопка сработала? – это те вопросы, на которые стоит ответить заранее.

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

4. Соблюдайте иерархию кнопок. Кнопки делятся на основные, вторичные и третичные и поэтому оформляются по-разному.

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

6. Применяйте стандарты при проектировании элементов. Таким образом пользователю не нужно сильно задумываться над взаимодействием и терять время (и нервы).

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

8. Сделайте достаточно большие кнопки. Лучший вариант – от 48х48 dp, что обеспечит в реальных параметрах оптимальный размер – 9 мм.

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

10. Придумайте понятное название для кнопки. В таком случае пользователи будут исполнять указанное там действие.

11. Не беспокойтесь о порядке размещения кнопок «Оk» и «Отмена». В любом случае они будут работать одинаково.

12. Избегайте неактивных кнопок. Лучше скажите пользователю, что что-то идёт не так с помощью уведомлений.

Почему чтобы переместить кнопку, нужно две недели / Блог компании VDSina.ru / Хабр

Многие сталкивались с нерелятивистскими искажениями времени разработки крупных проектов. Кажется, что выполнение задачи должно занять один-два дня, а на самом деле требуется две-три недели. Это вызывает вопросы, однако существует красивая метафора для иллюстрации происходящего. Разумеется, как любая метафора, она упрощает ситуацию, поэтому на самом деле ничего не объясняет, но всё же демонстрирует некоторые любопытные механики.
Допустим, мы строим пирамиду из кирпичиков Lego размером 2×2 блока. Сколько потребуется времени на создание MVP (minimum viable product) пирамиды? Столько, сколько требуется для установки одного кирпичика! Допустим, это 1 секунда. То есть мы создали MVP пирамиды за 1 с. Сколько потребуется времени на реализацию v1? Нам нужно установить ещё три детали на уровне 0 и одну на уровне 1. Ещё 4 детали, то есть ещё 4 секунды. А для версии v2? Ещё пять деталей на уровне 0, три детали на уровне 1 и одна на уровне 2 — суммарно девять деталей и ещё девять секунд.


То есть для каждого нового уровня нам понадобится потратить (версия * 2 + 1) + ((версия -1) * 2 + 1) + … + 1 секунд. На переход от версии 32 к версии 33 понадобится 19 м 16 с, а от версии 49 к версии 50 — 43 м 21 с. Это не так уж плохо (можно вычислять время для достижения любого уровня с помощью этой программы), однако очевидно, что время суммируется.

Допустим, мы делали это на протяжении нескольких часов (возьмём для конкретики 3 ч 48 м 5 с) и теперь находимся на уровне v33. Отлично! Каждая деталь имеет ширину 2 см и высоту 1 см, то есть у нас получилась пирамида высотой 33 см, занимающая пространство 66 см x 66 см.

На следующий день мы вкладываем чуть больше усилий, но ценой чуть большего количества времени, и переходим на v45. Не так хорошо, как вчера, но всё равно это хорошие подвижки.

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

Помогать нам согласились Алиса, Боб и Кэрол, поэтому на следующий день мы встречаемся и начинаем собирать детали. Каждый из нас взялся за свою сторону пирамиды, поэтому мы, по сути, движемся в четыре раза быстрее! Благодаря этому к концу четвёртого дня мы достигли уровня 69. Отличный темп!

Теперь, когда мы достигли определённого этапа, начинают становиться заметными более интересные проблемы иной природы. Мы находимся на версии v69, и пирамида имеет высоту 69 см с площадью основания 138 см x 138 см. Пока это вполне приемлемо, но она будет только увеличиваться, и в какой-то момент в комнате больше не останется места для дальнейшего строительства. Поэтому нам нужно переместить пирамиду в гараж. Будет ли это сложно? Сколько весит пирамида версии v69? Её масса составляет количество деталей * масса каждой детали. Удобно, что количество деталей равно количеству суммарно потраченных секунд, а каждая деталь весит примерно 1 г, то есть масса пирамиды… 65,369 кг! Довольно прилично.

Но и это ещё не всё — она не помещается в дверь (ширина двери примерно 90 см, а основание пирамиды — 138 см), поэтому нужно наклонить её и перемещать в таком виде. Но как нам тогда её держать? Почесав в затылке, мы придумываем решение — построим вокруг пирамиды опоры, чтобы придать конструкции жёсткость, и прикрепим к ним ручки для переноски. Алиса настаивает, что «нужно делать всё правильно» — построить вокруг пирамиды колесо и потом перекатить её в нужное место. («Что если нам придётся снова в будущем ещё раз перемещать её? Если мы создадим опору для колеса, то мы сделаем 90% работы для следующего перемещения». ) Но для создания колеса вокруг пирамиды потребуется целый день, не говоря уже о том, что внутри. Мы обсуждали эту задачу всё утро, и за обедом приняли решение построить вокруг нечто блочное, обернуть всё скотчем и перенести в гараж — возможно, это и не лучшее решение, но, по крайней мере, мы сможем двигаться дальше.

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

Перенос завершился огромным успехом — мы закончили даже до конца дня. Наш проект вырос до такой степени, что у него появилось собственное пространство! Мы были счастливы и сразу отправились на кухню, чтобы отпраздновать наше свершение. Алиса казалась слегка расстроенной, но я уверен, что всё будет нормально.

На следующий день мы пришли в гараж и обнаружили замотанную скотчем конструкцию размером 1,5 м x 1,5 м x 0,8 м… Похоже, нам придётся потратить немного времени на разматывание, ничего особенного.

Однако это заняло целый день, и чтобы немного ускорить процесс, я снял значительную часть уровней 20–45. Прежде чем я начал, Алиса что-то мне сказала, но если всё сработает, экономия времени себя оправдает… На починку понадобилось больше времени, чем я ожидал, но к концу дня мы были готовы к тому, что на следующий день приступим к созданию нового уровня!

Это седьмой день проекта, и он должен стать отличным! Мы двигались к версии v80, но тут произошла катастрофа: Боб устанавливал несколько деталей на верхних уровнях и прислонился к пирамиде, и случайно опёрся прямо на то место, где я вчера ремонтировал повреждённые уровни 20–45 (Говорил ему начинать с нижних уровней! Этого бы не произошло, начни он с нижних уровней!). Я бы впустую потратил время, заполняя деталями всю полость, поэтому заложил только самую поверхность, и неудивительно, что она проломилась, когда на неё оперся Боб. Боб попал на на повреждённые сектора пирамиды с 5F до 19M (Или 19D? Кэрол придумала немного запутанный способ маркировки частей пирамиды, поэтому я иногда не понимаю, где что находится). Как будто этого было недостаточно, Алиса заметила мои оптимизации и начала ещё одну полемику о том, что «нужно делать всё правильно».

К концу седьмого дня прогресс оказался отрицательным — мы по-прежнему оставались на версии v69, но ещё и с повреждёнными секторами 5F — 19M (или D?). Алиса требует, чтобы мы придумали правила строительства (как будто у нас время бесконечное) и обсуждали идеи перед их воплощением. Почему она всегда всё слишком усложняет? Я согласен, что нужны правила, но пока мне нужно только одно правило — не опираться на пирамиду!

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

Посмотрим, какие подвижки мы совершим на следующей неделе…

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

• Поместить кнопку под feature flag
• Скопировать кнопку в новое место (тоже под флагом)
• Протестировать её в тестовом окружении с отключенным и включенным флагом
• Включить флаг
• Дождаться релиза
• Убедиться, что после перехода всё в порядке (метрики нормальны/не выявлено никаких проблем)
• Подождать в течение нескольких релизов, чтобы убедиться в отсутствии проблем
• Сделать флаг включенным по умолчанию
• Подождать несколько релизов
• Удалить флаг с первой кнопкой

При таком процессе две недели на перемещение кнопки — это на самом деле довольно быстро.

---

На правах рекламы

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

Kнопка «Наверх», фиксация любой кнопки

Содержание:

1. Фиксированная кнопка
1.1. Кнопка «Наверх». Создание с помощью HTML-кода
1.2. Библиотека компонентов
2. Настройки фиксированной кнопки

1. Фиксированная кнопка

Вы можете создать кнопку, зафиксированную в определенной части экрана при прокрутке страницы. Для создания можно использовать HTML-виджет или Библиотеку компонентов.
С помощью фиксированной кнопки можно настроить: 

1. Кнопку «Наверх»: при нажатии на нее будет возврат к началу страницы. Также она будет исчезать на первом экране.

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

Если вы хотите настроить якоря, меню или другую навигацию по странице, то вам сюда: Навигация по странице

1. 1. Кнопка «Наверх». Создание с помощью HTML-кода

Вы можете создать кнопку «Наверх» с помощью данного HTML-кода
Скопируйте данный код и занесите его в HTML-виджет:

Через функционал импорта:

Для удобства воспользуйтесь инструкцией для Экспорта кода.

Как будет выглядеть виджет в качестве кнопки «Наверх»:

Готовый вариант кнопки «Наверх» можно посмотреть на странице: http://2e8mvbgo.plp7.ru/

1.2. Как перенести компонент из библиотеки в редактор?

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

https://creatium.io/library

В ней можно найти различные решения.

Нам сейчас подходит фиксация кнопки при прокрутке — номер 100.

Далее — размещаем любую секцию (например, «Пустая секция») в желаемом месте на странице.

Удобнее всего секцию с кнопкой будет разместить в самом конце страницы.

Переходим в меню копирования и выбираем «Импорт по номеру»

Указываем уже известный номер и наслаждаемся новым решением 🙂
Готово! Установка завершена. Осталось настроить кнопку под стиль сайта.

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

2. Настройки фиксированной кнопки

По умолчанию у кнопки установлен код для прокрутки наверх по клику:

Если вы хотите, чтобы кнопка выполняла другую функцию (например, отправка заявки или добавление товара), то просто переключите «Действие кнопки»:

Настраиваем желаемый внешний вид кнопки как обычно:

И переходим к настройкам отображения:

Положение кнопки в зафиксированном виде

Указываем положение кнопки — слева или справа и сверху или снизу.

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

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

Прозрачность кнопки до наведения

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

---

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

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

Вы также можете настроить виджет обратного звонка от Zadarma или онлайн-чат от Jivosite на Платформе. Инструкции расположены по ссылкам ниже:
Настраиваем интеграцию с сервисом Zadarma
Подключаем плагин JivoSite

кнопок · Bootstrap

Используйте настраиваемые стили кнопок Bootstrap для действий в формах, диалоговых окнах и т. Д. С поддержкой нескольких размеров, состояний и т. Д.

Примеры

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

Начальный Вторичный Успех Опасность Предупреждение Информация Свет Темный Ссылка на сайт

   Основной 
 Дополнительный 
 Успех 
 Опасно 
 Предупреждение 
 Информация 
 Светлый 
 Темный 

 Ссылка   

Передача смысла вспомогательным технологиям

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

Классы .btn предназначены для использования с элементом . Однако вы также можете использовать эти классы в элементах или (хотя некоторые браузеры могут применять немного другой рендеринг).

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

   Ссылка 

Кнопка

Кнопки контура

Нужна кнопка, но нет изрядных цветов фона, которые они приносят? Замените классы модификаторов по умолчанию на . btn-outline- * для удаления всех фоновых изображений и цветов на любой кнопке.

Начальный Вторичный Успех Опасность Предупреждение Информация Свет Темный

   Основной 
 Дополнительный 
 Успех 
 Опасно 
 Предупреждение 
 Информация 
 Светлый 
 Темный   

Размеры

Хотите кнопки большего или меньшего размера? Складываем .btn-lg или .btn-sm для дополнительных размеров.

Большая кнопка Большая кнопка

   Большая кнопка 
 Большая кнопка   

Маленькая кнопка Маленькая кнопка

   Маленькая кнопка 
 Маленькая кнопка   

Создайте кнопки уровня блока — те, которые охватывают всю ширину родительского элемента — путем добавления . БТН-блок .

Кнопка уровня блокировки Кнопка уровня блокировки

   Кнопка уровня блокировки 
 Кнопка уровня блокировки   

Активное состояние

Кнопки будут казаться нажатыми (с более темным фоном, более темной рамкой и вставкой тени), когда они активны. Нет необходимости добавлять класс к s, поскольку они используют псевдокласс . Тем не менее, вы все равно можете принудительно настроить активный внешний вид с помощью .active (и включает в себя атрибут aria-press = "true" ), если вам нужно реплицировать состояние программно.

   Основная ссылка 
 Ссылка   

Отключено

Сделайте кнопки неактивными, добавив логический атрибут disabled к любому элементу

.

Основная кнопка Кнопка

Основная кнопка Кнопка

Отключенные кнопки, использующие элемент , ведут себя немного иначе:

• не поддерживают атрибут disabled , поэтому необходимо добавить .disabled , чтобы он визуально казался отключенным.
• Некоторые удобные для будущего стили включены для отключения всех событий указателя на кнопках привязки. В браузерах, которые поддерживают это свойство, отключенный курсор вообще не отображается.
• Отключенные кнопки должны включать атрибут aria-disabled = "true" , чтобы указать состояние элемента для вспомогательных технологий.

   Основная ссылка 
 Ссылка   

Предупреждение о функциональности ссылки

Модель . disabled класс использует pointer-events: none , чтобы попытаться отключить функциональность ссылок s, но это свойство CSS еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают события указателя : нет , навигация с помощью клавиатуры остается неизменной, а это означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологий по-прежнему смогут активировать эти ссылки. Чтобы быть в безопасности, добавьте к этим ссылкам атрибут tabindex = "- 1" (чтобы они не получали фокус клавиатуры) и используйте собственный JavaScript, чтобы отключить их функциональность.

Плагин кнопки

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

Переключение состояний

Добавьте data-toggle = "button" , чтобы переключить активное состояние кнопки. При предварительном переключении кнопки необходимо вручную добавить .active class и aria-Press = "true" к .

Одиночный переключатель

Одиночный переключатель

Флажок и переключатели

Bootstrap .Стили кнопки могут быть применены к другим элементам, таким как s, для обеспечения переключения флажка или переключателя стиля радио. Добавьте data-toggle = "buttons" к .btn-group , содержащему эти измененные кнопки, чтобы включить их поведение переключения через JavaScript, и добавьте .btn-group-toggle для стилизации s в вашем кнопки. Обратите внимание, что вы можете создавать кнопки с питанием от одного входа или их группы.

Установленное состояние для этих кнопок — , обновляется только через щелчок событие на кнопке. Если вы используете другой метод для обновления ввода — например, с помощью или вручную применив свойство checked input — вам нужно будет переключить .active на вручную.

Обратите внимание, что предварительно отмеченные кнопки требуют, чтобы вы вручную добавили класс .active к входу .

  

  <метка>
     установлен
  
  

  

  <метка>
     Активен
  
  <метка>
     Радио
  
  <метка>
     Радио
  
  

Методы

Метод	Описание
$ (). кнопка ('переключение')	Переключает состояние отправки. Придает кнопке вид, что она была активирована.
$ (). Кнопка ('удалить')	Уничтожает кнопку элемента.

Создание волшебной 3D-кнопки с помощью HTML и CSS

Недавно я понял одну интересную мысль: кнопки — это «убийственная функция» Интернета.

Каждая важная вещь, которую мы делаем в Интернете, от заказа еды до записи на прием и воспроизведения видео, включает нажатие кнопки.Кнопки (и формы, которые они отправляют) делают Интернет динамичным, интерактивным и мощным.

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

В этом руководстве мы создадим причудливую 3D-кнопку:

Push Me

Целевая аудитория

Это учебное пособие среднего уровня для интерфейсных разработчиков. Он ориентирован на HTML / CSS, знания JavaScript не требуются.

Если вы относительно новичок в переходах CSS, я бы рекомендовал сначала прочитать «Интерактивное руководство по переходам CSS».

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

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

(Попробуйте сдвинуть ползунок «Показать», а затем взаимодействовать с кнопкой !)

Почему бы не использовать box-shadow или border ? Анимировать эти объекты на супер, дорого.Если нам нужен плавный переход на кнопке, мы добьемся большего успеха с этой стратегией.

Вот наша кнопка MVP в коде:

Наш элемент button обеспечивает бордовый цвет фона, имитирующий нижний край нашей кнопки. Мы также убираем границы / отступы по умолчанию, которые идут с элементами button .

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

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

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

Мы создали прочный фундамент, и теперь пришло время построить на нем несколько крутых вещей!

Ссылка на этот заголовок

Очертания фокуса

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

Вот как это выглядит по умолчанию в Chrome / MacOS:

В приведенном выше MVP я взял на себя смелость добавить объявление outline-offset . Это свойство дает нашей кнопке немного буфера:

 
 Это существенное улучшение, но все же немного раздражает глаза. Кроме того, это не работает последовательно: в Firefox  контур-смещение  не работает для контуров «фокуса» по умолчанию. 
 
 Мы не можем просто удалить его — этот контур  super  важен для людей, которые перемещаются с помощью клавиатуры.Они полагаются на него, чтобы узнать, какой элемент сфокусирован. 
 
 К счастью, мы можем использовать шикарный псевдокласс CSS, чтобы помочь нам: : focus-visible  
 
 Это чертовски крутой селектор, так что давайте разберемся с ним. 
 
 Псевдокласс : focus  будет применять свои объявления, когда элемент находится в фокусе. Это работает независимо от того, находится ли элемент в фокусе, переходя к нему с клавиатуры или щелкая по нему мышью. 
 
 : focus-visible  аналогичен, но он применяется только тогда, когда элемент находится в фокусе  и , пользователь может увидеть визуальный индикатор фокуса (например, потому что они используют клавиатуру для навигации). 
 
 Наконец, : not  позволяет нам смешивать некоторую логику. Стили будут применяться, когда элемент соответствует селектору : focus , но  не  селектору : focus-visible . На практике это означает, что мы будем скрывать контур, когда кнопка находится в фокусе и пользователь использует указательное устройство (например, мышь, трекпад, палец на сенсорном экране). 
  Поддержка и специальные возможности браузера  
 Скажу честно: приведенное выше правило довольно сбивает с толку! 
 
 Есть ли более ясный способ достичь того же эффекта? Что, если бы мы написали это так? 
 
 
  revert  — это специальное ключевое слово, которое вернется к тому значению, которое должно быть, в зависимости от настроек браузера по умолчанию *.В Chrome на MacOS это означает сплошную синюю линию. 
 
 Все проще, правда? Мы говорим: «Скрыть контур, кроме случаев, когда он явно сфокусирован». 
 
 К сожалению, у этого альтернативного метода есть проблема:  он не работает в старых браузерах .  
 Показать еще    Щелчок и фокус  
 В большинстве браузеров щелчок по кнопке фокусирует его. Однако в зависимости от вашего браузера и операционной системы это может быть не так! 
 
 MDN имеет отличную рецензию, в которой рассказывается, как разные браузеры ведут себя при нажатии кнопок.
 
 Кроме того, в Safari фокус кнопок можно использовать с помощью «Option + Tab». В других браузерах достаточно одной клавиши «Tab». 
 
 
  
 Ссылка на этот заголовок 
 Состояние наведения  
 Итак, в реальной жизни кнопки не поднимаются, чтобы встретиться с вашим пальцем до того, как вы нажмете на него. 
 
 Но было бы здорово, если бы они сделали? 
 
 Давайте сдвинем кнопку вверх на несколько пикселей при наведении курсора. Также давайте наложим переход   на передний слой. Это оживит изменения состояния, создавая более плавное взаимодействие.
 
 Я добавляю объявление  will-change: transform , чтобы эту анимацию можно было аппаратно ускорить.  Эта тема рассматривается в моем «Введение в переходы CSS». 
 
 
  
 Ссылка на этот заголовок 
 Внедрение индивидуальности  
 С переходом «blanket : transform 250ms » мы дали нашей кнопке анимацию, но она все еще не очень похожа на индивидуальность  . 
 
 Давайте рассмотрим различные действия, которые можно выполнять с этой кнопкой: 
 
 Должно ли каждое из этих действий иметь одинаковые характеристики? Я так не думаю.Я хочу, чтобы кнопка быстро опускалась при нажатии, и я хочу, чтобы она приходила в норму при отпускании. Когда курсор удаляется, я хочу, чтобы он возвращался в свое естественное положение с ледяной скоростью. 
 
 Вот как это выглядит. Попробуйте взаимодействовать с кнопкой, чтобы увидеть разницу: 
 
 Мы можем установить переопределения для каждого состояния, чтобы изменить поведение анимации. В дополнение к выбору различных скоростей, мы можем  также  изменить временные функции! 
 
 Наш переход по умолчанию, внутри . front , применяется, когда мышь покидает кнопку. Это наш переход к «возвращению к равновесию». Я дал ему неторопливую продолжительность 600 мс — вечность, когда дело касается микровзаимодействий. Я также дал ему настраиваемую кривую плавности через  cubic-bezier . 
 
 Я скоро напишу больше о кубических кривых Безье. По сути, они позволяют нам создать собственную временную кривую. Это инструмент более низкого уровня, который дает нам  тонны  контроля. 
 
 В случае нашей «равновесной» кривой это, по сути, более агрессивное облегчение  : 
 
 Когда мы нажимаем кнопку, мы переключаемся на наш переход : активный .Я выбрал молниеносное время перехода 34 мс — примерно 2 кадра при 60 кадрах в секунду. Я хочу, чтобы этот был быстрым, потому что именно так люди обычно нажимают кнопки в реальной жизни! 
 
 Наконец, наш переход : hover . Это состояние связано с двумя отдельными действиями: 
 
 В идеале я бы выбрал разные переходы для каждого из этих действий, но это невозможно в чистом CSS.  Если бы я  действительно  хотел пройти лишнюю милю, мне нужно было бы написать JS для устранения неоднозначности между этими состояниями.
 
 Я создал «упругую» кривую Безье, которая немного выходит за пределы. Это придает кнопке еще больше индивидуальности. Вот как выглядит эта кривая: 
 
 В конечном счете, кривые Безье никогда не будут выглядеть  довольно  такими же пышными, как физика пружины, но они могут быть довольно близки, если достаточно повозиться! 
 
 
  
 Ссылка на этот заголовок 
 Добавление тени  
 Чтобы  действительно  продавал все «3D», мы можем добавить тень: 
 
 Push Me 
 
 У вас может возникнуть соблазн достать  box-shadow , но мы добьемся большего успеха, повторив трюк, который мы видели ранее.Наша тень будет отдельным слоем, и она будет двигаться в направлении , противоположном  нашему переднему слою. 
 
 Для того, чтобы это сработало, нам нужно немного реструктурировать.  Вот разметка для нашей новой настройки: 
 
 
 Раньше мы использовали сам    в качестве краевого слоя. Теперь, однако, нам нужна тень, которая бы располагалась под ним. Наш    станет оберткой, содержащей 3 слоя, уложенных один поверх другого. 
 
 Вот CSS, некоторые элементы удалены для краткости: 
 
 Для того, чтобы складывать элементы HTML, мы используем абсолютное позиционирование.Последний слой,  .front , использует относительное позиционирование, поскольку нам нужен 1 дочерний элемент в потоке, чтобы задать ширину и высоту   . 
 
 Мы можем полагаться исключительно на DOM-заказ; не требуется  z-index  для управления порядком наложения! 
 
 С точки зрения того, как установить , перевести : наша тень движется в противоположном направлении от нашего переднего слоя. Тень не так далеко перемещается от базовой линии: в то время как  .front  перемещается вверх на 6 пикселей, . shadow  сдвигается вниз только на 4 пикселя. Это субъективный выбор; вы можете предпочесть другие ценности. Приветствуются эксперименты! 
 
 Мы также можем добавить немного размытия для более мягкой и естественной тени: 
 
 Этого можно добиться с помощью фильтра размытия: 
 
 
 
  
 Ссылка на этот заголовок 
 Цвет и эстетика  
 Мы просто примерно там, но мы можем сделать еще две мелочи, чтобы завершить эффект. 
 
 Этот первый очень тонкий, но действительно удовлетворительный.Я применяю линейный градиент к элементу «edge», чтобы казалось, что закругленные углы отражают меньше света: 
 Показать передний слой Показать градиент 
 Вот CSS для этого бита: 
 
 
 Мы почти у цели — давайте бросим Добавьте вишню на это мороженое и положите конец. 
 
 Последняя маленькая деталь — дополнительный эффект наведения: 
 
 Push Me 
 
 При наведении курсора кнопка светится. Оба слоя становятся светлее. 
 
 Как с этим бороться? Мы могли бы переключить цвета, но это немного усложняется из-за только что добавленного градиента. К счастью, мы можем использовать другой фильтр CSS: , яркость, . 
 
 
 При наведении курсора кнопка становится на 10% ярче. Это влияет на все 3 слоя.  filter  — это удивительно эффективное свойство для анимации, поэтому мы не будем слишком сильно нагружать оборудование. 
 
 
  
 Ссылка на этот заголовок 
 Усовершенствования для мобильных устройств  
 При нажатии интерактивного элемента на мобильных устройствах браузер вспыхивает сверху «прямоугольником касания»: 
 
 Обратите внимание на быстро мигающий серый прямоугольник? Цвет варьируется между iOS и Android, но эффект остается неизменным.
 
 Почему это происходит? Что ж, это поле может служить полезным отзывом, чтобы подтвердить, что вы успешно коснулись цели. Но наша кнопка предлагает множество отзывов как есть, поэтому в этом случае она нам не нужна. 
 
 Мы можем удалить его с помощью этого объявления: 
 
 
 Еще одна вещь: на iOS, если кнопку удерживать в течение секунды, телефон попытается выделить текст внутри кнопки: 
 
 Давайте сделаем нашу кнопку недоступной для выбора , чтобы улучшить эту ситуацию: 
 
 
  С большой властью приходит большая ответственность.  Мы должны проявлять большую осторожность при отключении функций браузера, предназначенных для повышения удобства использования! В этом случае я вполне уверен, что мы  улучшаем  опыт, а не ухудшаем его, но эти свойства следует использовать крайне редко. 
 
 Это был долгий путь, но я надеюсь, вы согласитесь, что мы создали кнопку , которая очень удобна. 
 
 Тоже очень показное; вы, вероятно, захотите быть довольно избирательным в выборе того, где вы используете такую ​​кнопку.Я бы не стал использовать эту кнопку для баннера согласия на использование файлов cookie GDPR! Но для грандиозных и захватывающих действий теперь у вас есть кнопка, которая соответствует 000 
 
 Если вы заинтересованы в повышении уровня своих навыков CSS, я работаю над курсом! Он специально разработан для разработчиков JS. Если вы работаете с такими фреймворками, как React или Vue, и не чувствуете себя комфортно с CSS, моя миссия в этом году — это изменить. Он называется  CSS для разработчиков JavaScript , и вы можете узнать больше на css-for-js. dev. 
 
 ✨ Вот окончательный исходный код нашей большой нажимаемой кнопки: 
 
 
 Button | Семантический интерфейс 
 

  

  
  
    
      Хотя для кнопки можно использовать любой тег, он будет доступен с клавиатуры, только если вы используете тег    или добавите свойство  tabindex = "0" .Кнопки, доступные с клавиатуры, сохранят стили фокуса после нажатия, что может визуально раздражать.
    
    
      Кнопка
    
     

      Фокусируемый
     
  

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

    
      Хорошо
    
    
      Отмена
    
   

  
    
     
 Кнопка может анимироваться для отображения скрытого содержимого 
     
 Размер кнопки будет автоматически изменен в соответствии с размером видимого содержимого. Убедитесь, что для скрытого содержимого достаточно места для отображения 
.
    
    
    
       
 Зарегистрируйтесь для получения учетной записи Pro 
       

        $ 12,99 в месяц
       
    
  

  
    
     
 Кнопка может отображаться рядом с меткой 
    
    
    
  
  

  
    
     
 Кнопка может иметь только значок 
    
       
    
  

  
    
     
 Кнопка может использовать значок в качестве метки 
    
       
      Пауза
    
    
       
      Следующий
    
  

  
    
     
 Основная кнопка менее выражена 
    
       
      Добавить в друзья
    
  
   

    Начальный
    Вторичный
    Положительный
    Отрицательный
   
   

    красный
    апельсин
    Желтый
    Оливковое
    Зеленый
    Бирюзовый
    Синий
    фиолетовый
    Фиолетовый
    Розовый
    коричневый
    Серый
    Чернить
   

  
    
     
 Кнопку можно отформатировать так, чтобы она появлялась на темном фоне 
     

      Стандарт
      Начальный
      Вторичный
      красный
      апельсин
      Желтый
      Оливковое
      Зеленый
      Бирюзовый
      Синий
      фиолетовый
      Фиолетовый
      Розовый
      коричневый
      Серый
      Чернить
     
  
  
     

      Базовый
      Начальный
      Вторичный
      Базовый красный
      Базовый апельсин
      Базовый желтый
      Базовый оливковый
      Базовый зеленый
      Базовый бирюзовый
      Базовый синий
      Базовый фиолетовый
      Базовый фиолетовый
      Базовый розовый
      Базовый коричневый
      Базовый серый
      Базовый черный
     
  


  

  
    
     
 Кнопки могут существовать вместе как группа 
     

      Один
      Два
      Три
     
  

  
    
     
 Группы кнопок могут отображать группы значков 
    
    
  

  

  
    
     
 Группы кнопок могут содержать условные обозначения 
    
  
  
     

      Либо текст кнопок может быть локализован или настроен с помощью атрибута  data-text . Если размер условных изменений потребуется отрегулировать  @orCircleSize 
     
    
  

  

  
    
     
 Кнопка может показать, что в данный момент выбран активный пользователь 
    
       
      Следовать
    
  

  
    
     
 Кнопка может показать, что в настоящее время она не может взаимодействовать с 
    
       
      Подписан
    
  

  
    
     
 Кнопка может отображать индикатор загрузки 
    Загрузка
    Загрузка
    Загрузка
    Загрузка
  

  

  
    
     
 Кнопка может быть отформатирована для ссылки на социальный сайт 
    
       
      Facebook
    
    
       
      Твиттер
    
    
       
      Гугл плюс
    
    
       
      ВКонтакте
    
    
       
      LinkedIn
    
    
       
      Instagram
    
    
       
      YouTube
    
  


  
    
     
 Пуговица может иметь разные размеры 
    
      Мини
    
    
      Крошечный
    
    
      Небольшой
    
    
      Середина
    
    
      Большой
    
    
      Большой
    
    
      Огромный
    
    
      Массивный
    
  

  
    
     
 Кнопка может быть выровнена по левому или правому краю своего контейнера 
    Плавающий вправо
    Влево Плавающий
  


  
    
     
 Кнопка может иметь разные цвета 
    красный
    апельсин
    Желтый
    Оливковое
    Зеленый
    Бирюзовый
    Синий
    фиолетовый
    Фиолетовый
    Розовый
    коричневый
    Серый
    Чернить
  

  
    
     
 Кнопка может уменьшить ее заполнение, чтобы поместиться в более узкое пространство 
    
      Держать
    
    
       
    
    
       
      Пауза
    
  

  
    
     
 Кнопку можно отформатировать для включения и выключения 
    
      Голосование
    
  

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

  
    
     
 Кнопка может указывать на негативные последствия 
    Отрицательная кнопка
  

  
    
     
 Пуговица может занимать ширину своего контейнера 
    Подходит для контейнера
  

  
  

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

  
    
    
      
    
  

  
    
     
 Кнопка может быть прикреплена слева или справа от другого содержимого 
    Оставил
    Верно
  


  

  
    
     
 Группы можно форматировать так, чтобы они отображались вертикально 
     

      Кормить
      Сообщения
      События
      Фотографии
     
  

  
    
     
 Группы могут быть отформатированы как значки 
    
  

  
    
     
 Группы можно форматировать как помеченные значки 
     

      
         
        Пауза
      
      
         
        Играть
      
      
         
        Перемешать
      
     

  
  
    
     
 Группы могут быть отформатированы для одновременного использования нескольких типов кнопок 
     

      
         
        Назад
      
      
         
        Стоп
      
      
        Вперед
         
      
     

  


  
    
     
 Группы можно разделить по ширине поровну 
     

      Обзор
      Технические характеристики
      Гарантия
      Отзывы
      Служба поддержки
     
    
     

      Обзор
      Технические характеристики
      Служба поддержки
     
  


  
    
     
 Группы могут иметь общий цвет 
     

      Один
      Два
      Три
     
  

  
    
     
 Группа кнопок может быть менее выраженной 
    
    
     

      Один
      Два
      Три
     
  
  

  
    
     
 Группы могут иметь общий размер 
     

      Один
      Два
      Три
     
  
  
  

  
 U.
 С. Система веб-дизайна (USWDS)  
       
 Компоненты 
          
        
        
       
 Кнопка привлекает внимание к важным действиям с большой выбираемой поверхностью. 




      
















  
  
    
 Предварительный просмотр компонентов 
 
  
    
         
 По умолчанию
По умолчанию
Парение
Активный
Фокус
ОтключеноНастиленная кнопка

 
 Дополнительный цвет
По умолчанию
Парение
Активный
Фокус
ОтключеноНастиленная кнопка

 
 Акцент холодного цвета
По умолчанию
Парение
Активный
Фокус
ОтключеноНастиленная кнопка

 
 Акцент теплого цвета
По умолчанию
Парение
Активный
Фокус
ОтключеноНастиленная кнопка

 
 Базовый цвет
По умолчанию
Парение
Активный
Фокус
ОтключеноНастиленная кнопка

 
 Наброски
По умолчанию
Парение
Активный
Фокус
ОтключеноНастиленная кнопка

 
 Контур инверсный
 

По умолчанию
Парение
Активный
Фокус
ОтключеноНастиленная кнопка
 

 
 Большая кнопка
По умолчанию
Не стилизованная кнопка

    
   
 
 
 
    







  
  
    
 Код компонента 
 
  
    


  
 
   
 По умолчанию 
 
 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 

 
 Дополнительный цвет 
 
 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 

 
 Акцент холодного цвета 
 
 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 

 
 Акцент на теплый цвет 
 
 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 

 
 Базовый цвет 
 
 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 

 
 Схема 
 
 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 

 
 Контур инверсный 
 

 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 


 
 Большая кнопка 
 
 По умолчанию 
 Кнопка без стиля   
   
 По умолчанию 
 
 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 

 
 Дополнительный цвет 
 
 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 

 
 Акцент холодного цвета 
 
 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 

 
 Акцент на теплый цвет 
 
 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 

 
 Базовый цвет 
 
 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 

 
 Схема 
 
 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 

 
 Контур инверсный 
 

 По умолчанию 
 Наведите 
 Активный 
 Фокус 
<кнопка отключена> отключена   кнопка без стиля 


 
 Большая кнопка 
 
 По умолчанию 
 Кнопка без стиля   
 Руководство 
 Когда использовать компонент кнопки 
  Важные действия.  Используйте кнопки для наиболее важных действий, которые вы хотите, чтобы пользователи выполняли на вашем сайте, например  Загрузить ,  Зарегистрироваться  или  Выйти .
 Когда рассматривать что-то еще 
  Ссылки между страницами сайта.  Используйте вместо этого обычные ссылки.
  Если действие менее популярно или менее важно.  Менее популярные или менее важные действия можно визуально оформить как ссылки.
 Руководство по использованию 
  Используйте стандартные кнопки для действий, которые переходят к следующему шагу.
  Используйте кнопки структуры для действий, которые происходят на текущей странице. 
  Придайте важному мероприятию особый стиль.  Оформите кнопку, которую должны нажимать большинство пользователей, так, чтобы она отличалась от других кнопок на странице. Попробуйте использовать кнопку  usa - большой вариант  или наиболее визуально отличный цветовой вариант.
  Убедитесь, что кнопки выглядят выбираемыми.  Используйте цветовые вариации, чтобы различать статическое, наведение и активное состояние.
  Не используйте слишком много кнопок на странице. 
  Используйте регистр предложений для меток кнопок. 
  Сделайте текст кнопки коротким.  Текст кнопки должен быть как можно короче со словами действия, которые четко объясняют, что произойдет, когда кнопка будет выбрана (например,  Загрузить ,  Просмотреть  или  Зарегистрироваться ).
  Начни с глаголом.  Сделайте первое слово текста кнопки глаголом. Например, вместо  Подача жалобы  пометьте кнопку  Подача жалобы .
  Иконки также могут быть полезны.  Иногда подумайте о добавлении значка, чтобы сигнализировать о конкретных действиях ( Загрузить, ,  Открыть в новом окне,  и т. Д.).
 Доступность 
  Кнопки должны отображать состояние видимого фокуса, когда пользователи переходят к ним. 
  Использовать стандартную разметку.  Избегайте использования тегов 
  или    для создания кнопок. Программы чтения с экрана автоматически не узнают, что это за кнопка.
  Программы чтения с экрана по-разному обрабатывают кнопки и ссылки.  При оформлении ссылок в виде кнопок помните, что программы чтения с экрана обрабатывают ссылки несколько иначе, чем кнопки. Нажатие клавиши пробела запускает кнопку, а нажатие клавиши Enter вызывает ссылку.
 Использование компонента кнопки 
 Примеры демонстрируют, как использовать элементы кнопки. Чтобы использовать стиль кнопки для ссылки, добавьте к вашей ссылке класс  usa-button .
 Чтобы использовать кнопку другого стиля в вашей ссылке, добавьте классы вариантов кнопки в дополнение к  usa-button .
 Настройки кнопок 
 Переменная
 Описание
  $ тема-кнопка-семейство шрифтов 
  $ тема-кнопка-граница-радиус 
  $ тема-кнопка-маленькая ширина 
 Размер кнопки поиска по заголовку
  $ тема-кнопка-обводка-ширина 
 Ширина обводки  контура  Варианты кнопок
 Варианты кнопок 
 Вариант
 Описание
 . usa-button - вторичный 
 Кнопка использует  вторичный  цвет
  .usa-кнопка - accent-cool 
 Кнопка использует  холодный акцент  цвет
  .usa-кнопка - теплый акцент 
 Кнопка использует  теплый акцент  цвет
 .usa-button - база 
 Кнопка использует основу   цвет
  . usa-кнопка - контур 
 Прозрачная кнопка с цветной обводкой
  .usa-кнопка - обратная 
 Кнопка светлого цвета для темного фона
 .usa-button - большая 
 Кнопка большего размера
  .usa-кнопка - без стиля 
 Кнопка, которая выглядит как ссылка
 Пакет 
  Использование пакета:   @import usa-button 
  Требуется:   Требуется ,  global 
 Компонент
 React Button — Material-UI 
 Кнопки
 позволяют пользователям выполнять действия и делать выбор одним нажатием.
 Кнопки сообщают о действиях, которые могут выполнять пользователи. Обычно они размещаются по всему пользовательскому интерфейсу в таких местах, как:
 Диалоги
 Модальные окна
 Формы
 Карт
 Панели инструментов
 Отдельные кнопки 
 Отдельные кнопки
выделяются высоким акцентом, отличаются использованием возвышения и заливки.
Они содержат действия, которые являются основными для вашего приложения.
 DefaultPrimarySecondaryDisabledLink
   По умолчанию 
<Вариант кнопки = "содержащий" цвет = "первичный">
  Начальный

<Вариант кнопки = "содержащий" цвет = "вторичный">
  Вторичный

<Вариант кнопки = "содержащийся" отключен>
  Отключено

<Вариант кнопки = "содержал" цвет = "первичный" href = "# содержал-кнопки">
  Ссылка на сайт
  
 Вы можете удалить отметку с помощью опоры  disableElevation  prop.
 Отключить высоту
  
  Отключить высоту
  
 Текстовые кнопки 
 Текстовые кнопки
обычно используются для менее выраженных действий, в том числе для расположенных:
 В карточках текстовые кнопки помогают акцентировать внимание на содержимом карточки.
 DefaultPrimarySecondaryDisabledLink
   По умолчанию 
 Основной 
 Дополнительный 
<Кнопка отключена> Отключено 

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

  Начальный


  Вторичный

<Вариант кнопки = "выделенный" отключен>
  Отключено


  Ссылка на сайт
  
 Обработка щелчков 
 Все компоненты принимают обработчик  onClick , который применяется к корневому элементу DOM.
   {alert ('clicked')}}> Нажми меня   
 Обратите внимание, что в документации не упоминаются собственные свойства (их много) в разделе компонентов API.
 Кнопка загрузки 
 Размеры 
 Необычные кнопки большего или меньшего размера? Используйте свойство  size .
 SmallMediumLarge
 SmallMediumLarge
 SmallMediumLarge
 Кнопки со значками и меткой 
 Иногда вам может понадобиться иметь значки для определенных кнопок, чтобы улучшить UX приложения, поскольку мы распознаем логотипы легче, чем простой текст. Например, если у вас есть кнопка удаления, вы можете пометить ее значком мусорной корзины.
 DeleteSendsendUploadTalkSaveSave
 Кнопки с пиктограммами 
 Кнопки с пиктограммами обычно встречаются на панелях приложений и панелях инструментов.
 Иконки
 также подходят для кнопок-переключателей, которые позволяют выбрать один или несколько вариантов.
не выбран, например, добавление или удаление звездочки для элемента.
  
  


  


  


  
  
 Настраиваемые кнопки 
 Вот несколько примеров настройки компонента.Вы можете узнать больше об этом в
отменяет страницу документации.
 Custom CSSTheme ProviderBootstrap
 🎨 Если вы ищете вдохновения, вы можете проверить примеры настройки MUI Treasury.
 Сложные кнопки 
 Текстовые кнопки, содержащиеся кнопки, плавающие кнопки действий и кнопки со значками созданы на основе одного и того же компонента:  ButtonBase .
Вы можете воспользоваться преимуществами этого компонента более низкого уровня для создания пользовательских взаимодействий.
 Сторонняя библиотека маршрутизации 
 Один из распространенных вариантов использования — использование кнопки для запуска перехода на новую страницу.Компонент  ButtonBase  предоставляет свойство для обработки этого варианта использования: компонент  .
Однако для определенных полифиллов фокуса  ButtonBase  требуется узел DOM предоставленного
составная часть. Это достигается путем прикрепления ссылки к компоненту и ожидания, что
Компонент перенаправляет эту ссылку на базовый узел DOM.
Учитывая, что многие интерактивные компоненты полагаются на  ButtonBase , вы должны
возможность использовать его повсюду.
 Вот пример интеграции с реактивным маршрутизатором.
 Ограничения 
 Курсор запрещен 
 Компонент ButtonBase устанавливает  событий-указателей: нет;  на отключенных кнопках, что предотвращает появление отключенного курсора.
 Если вы хотите использовать  not-allowed , у вас есть два варианта:
  Только CSS . Вы можете удалить стиль событий указателя в отключенном состоянии элемента   :
  .MuiButtonBase-root: disabled {
 курсор: не допускается;
 указатель-события: авто;
}  
 Однако:
 Вы должны добавить  событий-указателей: нет;  назад, когда вам нужно отобразить всплывающие подсказки для отключенных элементов.
 Курсор не изменится, если вы визуализируете что-то отличное от элемента кнопки, например, ссылку    элемент.
  Изменение DOM . Можно пуговицу завернуть:
  
 <Компонент кнопки = {ссылка} отключен>
   отключен
 
  
 Это имеет то преимущество, что поддерживает любой элемент, например, ссылку    элемент.
 Кнопка — Carbon Design System 
 Кнопки используются для инициализации действия. Ярлыки кнопок показывают, какое действие будет
возникают, когда пользователь взаимодействует с ним.
 значок информации
  Примечание:  Некоторые из обсуждаемых здесь примеров включают жидкость (полный диапазон) и
подвесные пуговицы, недоступные для производственного использования. Это руководство
отражает наше текущее понимание этих тем, и мы работаем над тем, чтобы
выпуск этой работы в будущей версии Carbon.
 Кнопки — это интерактивные элементы, которые используются для запуска действий. Они
передавать призывы к действию пользователю и позволять пользователям взаимодействовать со страницами
разными способами. Ярлыки кнопок показывают, какое действие произойдет, когда пользователь
взаимодействует с ним.
 Когда использовать 
 Используйте кнопки, чтобы сообщать о действиях, которые пользователи могут выполнять, и позволять пользователям взаимодействовать
со страницей. На каждой странице должна быть одна основная кнопка, а все остальные вызовы
к действию должны быть представлены в виде кнопок с нижним выделением.
 Когда не использовать 
 Не использовать кнопки в качестве элементов навигации. Вместо этого используйте
ссылки, когда
желаемое действие — перевести пользователя на новую страницу.
 Каждый вариант кнопки имеет определенную функцию, и ее дизайн сигнализирует о том, что
функция пользователю. Поэтому очень важно, чтобы разные варианты
последовательно внедряются во всех продуктах, так что они сообщают правильные
действия.
 Вариант
 Назначение
  Первичный 
 Для основного призыва к действию на странице. Основные кнопки должны появляться только один раз на экране (не включая заголовок приложения, модальное диалоговое окно или боковую панель).
  Вторичный 
 Для дополнительных действий на каждой странице. Дополнительные кнопки можно использовать только вместе с основной кнопкой. В составе пары функция вторичной кнопки заключается в выполнении отрицательного действия набора, такого как «Отмена» или «Назад». Не используйте дополнительную кнопку изолированно и не используйте дополнительную кнопку для положительного действия.
  Третичный 
 Для менее заметных, а иногда и независимых действий. Третичные кнопки могут использоваться изолированно или в паре с основной кнопкой, когда есть несколько призывов к действию. Третичные кнопки также могут использоваться для подзадач на странице, где присутствует основная кнопка для основного и конечного действия.
  Опасно 
 Для действий, которые могут иметь разрушительные последствия для данных пользователя (например, удалить или удалить).Кнопка «Опасность» имеет три стиля: основной, третичный и призрачный.
  Ghost 
 Для наименее выраженных действий; часто используется вместе с основной кнопкой. В такой ситуации, как поток выполнения, кнопка-призрак может быть связана с набором основной и дополнительной кнопок, где основная кнопка предназначена для действия вперед, дополнительная кнопка предназначена для «Назад», а кнопка-призрак — для «Отмена». .
 Кнопка
  Кнопка 
 
  Button  
 
 Текстовая метка кнопки является наиболее важным элементом кнопки, так как она
сообщает действие, которое будет выполнено при взаимодействии с ним пользователя.В содержащейся кнопке текст всегда выравнивается по левому краю, а не по центру. По умолчанию
Углерод использует регистр предложений для всех меток кнопок.
 Если текстовая метка не используется, должен присутствовать значок, чтобы обозначить, что
кнопка делает.
 1. Содержащаяся кнопка 
 A. Текстовая метка 
 B. Контейнер 
 C. Значок (необязательно)
 3. Призрачная кнопка 
 A. Текстовая метка 
 C. Значок (необязательно)
 2. Кнопка с контуром 
 A . Текстовая метка 
 B. Контейнер 
 C.Значок (дополнительно)
 4. Кнопка со значком 
 B. Контейнер (дополнительно) 
 C. Значок
 Выровнять текст на кнопке по левому краю, даже если кнопка широкая.
 Не центрируйте текст на кнопке, даже если кнопка широкая.
 Кнопки названы в соответствии с их размером и использованием в наборе Carbon Sketch и
в коде. В приведенной ниже таблице добавлен более подробный контекст для каждого варианта использования.
размер.
 Имя
 Высота (px / rem)
 Сценарий использования
  Полный выпуск за обрез 
 64/4
 Используется, когда кнопки выходят за край более крупного компонента, например, боковые панели или модальные окна. Примечание. Этот вариант не входит в комплект, поскольку не имеет кодированного аналога. Carbon предлагает эту кнопку только в контексте модального компонента. 
  По умолчанию 
 48/3
 Использование в качестве действий основной страницы и других автономных действий.
  Поле 
 40 / 2,5
 Используется, когда кнопки связаны с полями ввода.
  Маленький 
 32/2
 Используется, когда недостаточно места по вертикали для кнопки по умолчанию или кнопки размера поля.
 Необязательно использовать кнопки в том порядке, в котором их метки
подразумевать. Например, вам не всегда нужно использовать дополнительную кнопку в качестве
вторая кнопка в вашем макете. Самое главное — создать визуальный
иерархия между кнопками в вашем пользовательском интерфейсе. Помните об этих передовых методах.
 Одна кнопка с высоким выделением 
 Как правило, макет должен содержать одну кнопку с высоким выделением, которая
дает понять, что другие кнопки имеют меньшее значение в иерархии.Этот
кнопка с высоким выделением привлекает наибольшее внимание.
 Выделение нескольких кнопок 
 Кнопка с высоким выделением может сопровождаться кнопками со средним и низким выделением
выполняющие менее важные действия. Имейте в виду, что вам следует только группировать
вместе призывы к действию, которые имеют отношение друг к другу.
 Хотя второстепенные кнопки менее заметны, потому что они меньше
насыщенные, чем их основные аналоги, они по-прежнему тяжелы в тональном плане. Если твой
макет требует нескольких действий — как в случае с некоторыми панелями инструментов, списками данных
и информационные панели — кнопки с низким выделением (третичные или призрачные) могут быть лучшим выбором.
 Используйте кнопки с высоким и средним выделением в группе кнопок.
 Не используйте две выделенные кнопки в группе кнопок.
 Выравнивание означает, выровнены ли кнопки по правому или левому краю
окно, контейнер или макет. Кнопки уникальны, больше, чем любые другие
компонент, в том смысле, что их выравнивание зависит от того, где они появляются, и от того,
не они содержатся в другом компоненте.
 Как правило, в полностраничных дизайнах основная кнопка находится слева.
страницы.Когда окно браузера велико и пользователь прокручивает, чтобы прочитать,
лучше всего иметь основную кнопку, на которой было сосредоточено внимание пользователя.
все это время. Тогда как в мастерах, где пользователь продвигается через серию
шаги или диалоговые окна, основное действие обычно находится внизу
верно. Кнопки в таких компонентах, как уведомления, поля поиска и данные
таблицы также выравниваются по правому краю.
 В некоторых случаях группа кнопок или даже одна кнопка в случае боковой панели
или небольшая плитка — может занимать всю ширину окна или контейнера.Типичный вложенный
Расположение кнопок:
 Баннер с призывом к действию
 Диалоговые окна
 Мастера
 Формы
 Карты
 Панели инструментов
 Выравнивание
 Вариант использования
  Выровненный по левому краю 
 Баннер с призывом к действию, внутристраничные формы и вложенные кнопки в таких компонентах, как плитки
  Выровненный по правому краю
 Встроенные уведомления, встроенные кнопки полей и таблицы данных, прогрессивные формы, мастера и однокнопочные диалоговые окна
  Полный диапазон 
 Диалоги, боковые панели и маленькие плитки; в настоящее время Carbon не предлагает способ реализовать полноразмерные кнопки в коде без переопределения, они имеют максимальный размер 320 пикселей
 Плавные и фиксированные кнопки 
 Выравнивание кнопок также тесно связано с тем, рассматривается ли кнопка как кнопка
фиксированный или подвижный элемент в макете.Когда мы говорим «жидкость», мы имеем в виду, что
пуговица становится частью более крупного сложного компонента за счет кровотечения двух или более
края его контейнера. Вместо того, чтобы определять ширину плавной кнопки в
столбцов или мини-блоков, его ширина определяется как процент (часто 50%) от
ширина контейнера. Кроме того, как правило, плавные кнопки никогда не выравниваются по левому краю.
в макете или контейнере — они всегда либо выровнены по правому краю, либо охватывают все
ширина контейнера.
 Компоненты жидкости, такие как кнопка, никогда не существуют изолированно.Как вы можете видеть в
в приведенных выше примерах они всегда являются частью другого компонента, такого как модальный элемент или форма.
Другие жидкие компоненты включают плитки и совсем недавно
текстовые вводы.
 Пример экрана входа в систему с использованием поля ввода жидкости и кнопки жидкости
 Выполнять наведение призрачной кнопки обрезки, когда она сопряжена с другими плавными кнопками.
 Не используйте третичную кнопку в жидкостном приложении.
 Плавная рамка кнопки 
 Многие дизайнеры обращались к нам за дополнительными рекомендациями по
границы между всеми плавными кнопками.В
последнее обновление, мы
добавлена ​​граница в 1 пиксель между всеми плавными кнопками, которые вызывают токен  $ ui-03  для
тонкие границы. Эта функция добавляет различие 3: 1 между двумя интерактивными
Элементы пользовательского интерфейса. Граница — это рекомендуемая функция для улучшения доступности в
визуализации данных, и здесь должна применяться та же логика.
 Пример границы токена $ ui-03 между плавными кнопками
 Использование сетки 
 По умолчанию ширина контейнера равна размеру текстовой метки с 64 пикселями.
фиксированный отступ с правой стороны и фиксированный отступ 16 пикселей слева.Тем не мение,
когда возможно, установите относительное положение контейнера кнопки для реагирующего
сетка макета и сопоставьте ширину кнопки с другими элементами на странице. Идеально,
при использовании групп связанных кнопок (не включая кнопки-призраки) они должны
все должны быть одинаковой ширины. См. Группы кнопок ниже для получения дополнительной информации.
Подробная информация.
 Пример основной кнопки, соответствующей ширине карточки в макете
 Группы кнопок — полезный способ выравнивания кнопок, которые связаны между собой.
Сгруппируйте кнопки логически в наборы в зависимости от использования и важности.Очень много
призывы к действию ошеломят и запутают пользователей, поэтому их следует избегать.
 Как упоминалось в разделе «Акцент», вам не обязательно
используйте кнопки в том порядке, в котором подразумеваются их метки. Либо вторичный, либо
третичную кнопку можно использовать вместе с основной кнопкой. Фактически, из-за
к визуальному значению дополнительной кнопки рекомендуется использовать третичную
или кнопки-призраки в макетах с более чем тремя призывами к действию.
 Используйте основную кнопку и две одинаковые кнопки с меньшим выделением в группе кнопок.
 Не смешивайте первичные, вторичные и третичные кнопки в одной группе кнопок.
 Группы кнопок и сетка 
 В идеале, при использовании групп связанных кнопок (не включая кнопки-призраки),
все они должны быть одинаковой ширины. Это может быть достигнуто одним из двух способов, оба
из которых приемлемы. Первый подход предполагает использование
режим узкой сетки. В этом
В этом случае каждая кнопка будет установлена ​​индивидуально в сетке столбцов.  Примечание:
Разработчики Carbon работают над режимом узкой сетки, который в настоящее время остается
кнопки могут быть достигнуты только с переопределением.
 Пример подвешивания пуговиц
 Некоторые продукты не хотят вешать пуговицы в желоб, но все же хотят
Расстояние между кнопками 16 пикселей. Этого можно добиться при сохранении одинаковой ширины
кнопок, рассматривая группу кнопок как один объект (а не два
отдельные объекты) на сетке. Каждая кнопка будет занимать 50% их
контейнер с программным промежутком 16 пикселей между ними.
 Здесь группа кнопок обрабатывается как один элемент в сетке, чтобы получить промежуток 16 пикселей между ними, без провисания промежутка.
 Применяйте одинаковую ширину ко всем кнопкам в группе, даже если они не выделяются за обрез.
 Не делайте в группе кнопки разной ширины.
 Горизонтально расположенные группы 
 При использовании нескольких кнопок положение основной кнопки соответствует
руководство по выравниванию выше. Подводя итог, основная кнопка будет
с выравниванием по левому краю и расположенным слева от вторичной / третичной кнопки на
полностраничный дизайн. Основная кнопка будет выровнена по правому краю и появится в
справа от вторичной / третичной кнопки в мастерах и диалоговых окнах.
 значок информации
  Примечание:  Это руководство было изменено. Ранее мы выступали за сохранение
положение основной кнопки справа от дополнительной кнопки, когда кнопка
группа была выровнена по левому краю. Поговорив с командами и проведя дополнительные исследования, мы
пересмотрели нашу позицию.
 Сгруппированные группы кнопок 
 На типичных целевых страницах продукта кнопки расположены рядом. Однако по вертикали
группы кнопок также распространены в продуктах, чтобы сэкономить недвижимость в узких столбцах
а иногда и боковые панели.В этих случаях основная кнопка всегда
вверху, а вторичная или третичная кнопка — внизу.
 Обычно, когда дизайнеры складывают кнопки, они обычно используют фиксированные кнопки.
Тем не менее, многослойные плавные кнопки также можно использовать на боковых панелях рабочего стола с
особенно длинные призывы к действию.  Примечание: экспериментирование со сложенными плавными кнопками
потребует переопределения существующего кода. 
 Группы с кнопками опасности 
 Кнопки опасности имеют другой визуальный стиль, чтобы информировать пользователей о потенциально опасных ситуациях.
разрушительные действия, которые они собираются предпринять.В наборе используйте основную опасность
стиль кнопки.
 Текстовая метка кнопки — самый важный элемент кнопки, так как она
сообщает действие, которое будет выполнено при взаимодействии с ним пользователя.
Кнопки должны быть четкими и предсказуемыми.
 Надписи на кнопках должны четко обозначать действие кнопки. Предоставлять
достаточно контекста, используйте формулу содержания {глагол} + {существительное} на кнопках, кроме
случай общих действий, таких как «Готово», «Закрыть», «Отмена», «Добавить» или «Удалить».
 Есть исключения из этого правила для ситуаций, когда длина пуговицы может
вызывают проблемы в компактных интерфейсах или отрицательно влияют на перевод, но {глагол} +
Формула {существительное} по-прежнему является лучшей практикой.
 Для согласованности см. Carbon’s
правила содержания для списка
ярлыки рекомендуемых действий.
 По возможности используйте в кнопках формулу содержания {глагол} + {существительное}.
 Не используйте только существительное в качестве названия кнопки.
 Мышь 
 Пользователи могут активировать кнопку, щелкнув в любом месте контейнера кнопок.
 Клавиатура 
 Пользователи могут нажать кнопку, нажав  Введите  или  Пробел , пока кнопка
фокус. Дополнительные возможности взаимодействия с клавиатурой см. На вкладке специальных возможностей.
 Программы чтения с экрана 
 VoiceOver: пользователи могут нажать кнопку, нажав  Введите  или  Пробел , пока
кнопка имеет фокус.
 JAWS: пользователи могут вызвать кнопку, нажав  Введите  или  Пробел , пока кнопка
имеет фокус.
 NVDA: пользователи могут активировать кнопку, нажав  Введите  или  Пробел , пока кнопка
имеет фокус.
 Значки могут быть размещены рядом с ярлыками, чтобы прояснить действие и привлечь внимание
на кнопку. В некоторых случаях вместо значка будет достаточно значка.
текстовую метку, но используйте кнопки с пиктограммами осторожно.
 Использование глифов (16 пикселей) внутри кнопок
 Глифы отличаются своей сплошной формой и выделенными деталями
 Глифы всегда должны отображаться справа от текста
 Глифы, используемые в кнопках, должны быть непосредственно связаны с действием, которое пользователь
принимая
 Глифы должны иметь то же значение цвета, что и текст внутри кнопки
 Разместите значок справа от кнопки после текста.
 Не размещайте значок слева от кнопки перед текстом.
 Кнопки с пиктограммами позволяют пользователям выполнять действия и выбирать одним касанием.
Кнопки со значками могут иметь вид основного, дополнительного, третичного или призрачного.
вариант, но чаще всего они будут стилизованы под основные или призрачные кнопки.
 Пример кнопки-призрака, состоящей только из значков, в таблице данных
 Кнопка опасности имеет три разных стиля: основной, третичный и призрачный.
Выбор стиля кнопки опасности будет зависеть от уровня
Вы хотите сделать акцент на опасном действии.Деструктивные действия, которые
считается обязательным или основным шагом в рабочем процессе, следует использовать основной
стиль кнопки опасности. Однако если разрушительное действие — лишь одно из нескольких
действия, которые может выбрать пользователь, затем стиль с меньшим акцентом, такой как третичный
кнопка опасности или призрачная кнопка опасности могут быть более подходящими.
 Примеры кнопок первичной, третичной и призрачной опасности
 Помогите нам улучшить этот компонент, предоставляя отзывы, задавая вопросы и
оставляя любые другие комментарии к
GitHub.
 Кнопка
 — официальная Minecraft Wiki 
 Кнопка   — это не сплошной блок, который может обеспечивать временную мощность красного камня.
 Получение [править] 
 Breaking [править] 
 Деревянные пуговицы легко ломаются топорами, а каменные пуговицы легко ломаются киркой.
 Блок
 Деревянный
 Камень
 Твердость
 0,5
 0,5
 Инструмент
 Время отключения  [A] 
 По умолчанию
 0.75
 0,75
 деревянный
 0,4
 0,4
 Камень
 0,2
 0,2
 Утюг
 0,15
 0,15
 Алмаз
 0,1
 0,1
 Нетерит
 0,1
 0,1
 Золотой
 0,1
 0,1
 ↑ Время для незачарованных инструментов, используемых игроками без эффектов статуса, измеряется в секундах.Для получения дополнительной информации см. Нарушение § Скорость.
 Кнопка удаляется и выпадает как элемент, если:
 его крепежный блок перемещен, удален или уничтожен
 вода или лава течет в его пространство
 поршень пытается толкнуть его или перемещает блок в его пространство
 Естественное поколение [править] 
 Каменные пуговицы создаются естественным образом в цитаделях, рядом с железными дверями.  [ JE only ]  Каменные пуговицы также появляются в доме оружейника в пустыне, прикрепленном к граниту.
 Пуговицы из джунглей появляются естественным образом на стенах домов в пустынных деревнях.
 Ремесло [править] 
 Пуговицы можно создать из досок для соответствующей деревянной пуговицы или из камня для каменной пуговицы.
 Redstone power [править] 
 Кнопка может использоваться как моностабильный источник питания (она автоматически отключается вскоре после активации).
 Размещение
 Кнопки можно разместить, используя его на поверхности.
 Их можно прикрепить сбоку, снизу и вверху любого полностью непрозрачного блока.
 Если поместить кнопку сверху или снизу блока, она может быть повернута в любом направлении. .
 Дополнительную информацию о размещении на прозрачных блоках можно найти в разделе «Прозрачность / Размещение».
 Активация
 Кнопки обычно неактивны, но игроки могут временно активировать их.С ее помощью можно активировать кнопку. Деревянная кнопка также может быть активирована выпущенной стрелой или брошенным трезубцем, если ее блок столкновения коснулся кнопки.
 Мобы не могут активировать кнопки напрямую, но стрелы, выпущенные скелетами или раздатчиками, могут активировать деревянные кнопки.
 Поведение
 При активации деревянная кнопка остается активной в течение 15 тиков красного камня (1,5 секунды, без задержки), а каменная кнопка остается активной в течение 10 тиков красного камня (1 секунда, без задержки).Деревянная кнопка, активированная выпущенной стрелой или брошенным трезубцем, остается активной до тех пор, пока стрела или трезубец не исчезнет (через одну минуту) или не будет поднят игроком.
 В активном состоянии кнопка:
 Когда кнопка меняет состояние, она обеспечивает обновление красного камня для всех компонентов красного камня, смежных с собой (включая сверху и снизу), а также для всех компонентов красного камня, смежных с блоком ее присоединения.
 Топливо [править] 
 Деревянные пуговицы можно использовать в качестве источника топлива в печах плавки 0.5 элементов на кнопку.  [только  Java Edition ] 
 Generic [править] 
 Stone [править] 
  Java Edition :
 Bedrock Edition:
 Дерево [править] 
  Java Edition :
 Bedrock Edition:
 Звук
  Источник 
  Описание 
 ID пространства имен
 Громкость
 Шаг
?
 Блоки
 После того, как блок сломался
  раскопать.дерево 
 1,0
 0,8
?
 Блоки
 Падение на блок с повреждениями при падении
  Пад. Дерево 
 0,4
 1,0
?
 Блоки
 Пока блок находится в процессе разрушения
  hit.wood 
 0,23
 0,5
?
 Блоки
 Прыжок с блока
  Прыжок.дерево 
 0,12
 1,0
?
 Блоки
 Падение на блок без повреждений при падении
  земля. Дерево 
 0,18
 1,0
?
 Блоки
 Ходьба по блоку
  ступенька. Дерево 
 0,3
 1,0
?
 Блоки
 При установке блока
  use.wood 
 1.0
 0,8
 Уникальный [править] 
  Java Edition :
 Значения данных [править] 
 ID [править] 
  Java Edition :
 9023_buttons  9023_buttons 9023_buttons 9023_Block7 Block & Item_button_button_blackstone_button_button_button_button_button
 Имя
 ID с пространством имен
 Теги блоков (JE)
 Теги элементов (JE)
 Форма
 Ключ перевода
 Stone Button
  кнопки Stone_button  
0 9023 9023 
 Блок и элемент
  блок.minecraft.stone_button 
 Дубовая пуговица
  oak_button 
  кнопок  
  Wooden_buttons 
  кнопок  
 minewood_buttons 
 Spruce Button
  spruce_button 
  button  
  Wooden_buttons 
  button  
  Wooden_buttons 
 Block & Item
  block.minecraft.spruce_button 
 Birch Button
  birch_button 
  button  
  Wooden_buttons 
  button  
  Wooden_buttons 900.mine.buttons
 9023 9023
 Jungle Button
  jungle_button 
  buttons  
  Wooden_buttons 
  buttons  
  Wooden_buttons 
 Block & Item
  block.minecraft.jungle_button 
 Кнопка Acacia
  acacia_button 
  кнопки  
  деревянные_buttons 
  кнопки  
  Wooden_buttons 900.mine.buttons 9023
 Dark Oak Button
  dark_oak_button 
  кнопок  
  Wooden_buttons 
  кнопок  
  Wooden_buttons 
 Block & Item
  block.minecraft.dark_oak_button 
 Crimson Button
  crimson_button 
  кнопок  
  non_flammable_wood  
  Wooden_buttons 
2
button_buttons 
 7 9017
 7 9017
 7 9129 .minecraft.crimson_button 
 Деформированная кнопка
  warped_button 
  кнопок  
  non_flammable_wood  
  Wooden_buttons 
 
  деревянные пуговицы 
  деревянные кнопки  
  деревянные, не связанные блокировать.minecraft.warped_button 
 Кнопка Polished Blackstone
  polished_blackstone_button 
  кнопок 
  кнопок 
 Block & Item
   block.black122_bolished
 9023 9023 Acaciabutton.name2  9023 Warped2 Кнопка с искривлением 
 Имя
 ID в пространстве имен
 Числовой идентификатор
 Форма
 Ключ перевода
 Каменная кнопка
  stone_button 
  77 
 Блок и элементstone_button.name 
 Дубовая пуговица
  Wooden_button 
  143 
 Block & Item
  tile.w Wooden_button.name 
 Spruce
 Block & Item
  tile.spruce_button.name 
 Birch Button
  birch_button 
  396 
 Block & Item
  плитка.birch_button.name 
 Кнопка джунглей
  jungle_button 
  398 
 Блок и элемент
  tile.jungle_button.name2 
 Block & Item
  tile.acacia_button.name 
 Dark Oak Button
  dark_oak_button 
  397 
 Block & Item
  плитка.dark_oak_button.name 
 Crimson Button
  crimson_button 
  515 
 Block & Item
  tile.crimson_button.name 
 Block & Item
  tile.warped_button.name 
 Полированная кнопка Blackstone
  polished_blackstone_button 
  551 
 Block & Item
  плитка.polished_blackstone_button.name 
 Метаданные [править] 
 В Bedrock Edition данные блока кнопки хранят ее ориентацию и то, активна ли она:
 бит
 Значения
 0x1 
 0x2 
 0x4
 Три бита, хранящие значение от 0 до 5:
 0: Кнопка на блоке снизу вниз
 1: Кнопка на блоке сверху вверх
 2: Кнопка на стороне блока, обращенной на север
 3: Кнопка на блоке со стороны юга
 4: Кнопка на стороне блока, обращенной на запад
 5: Кнопка на стороне блока обращена на восток
 0x8
 Если этот бит установлен, кнопка в настоящее время активна.
 Состояния блока [править] 
  Java Edition :
 Имя
 Значение по умолчанию
 Допустимые значения
 Описание
  грань 
  стена 
  потолок  
  пол  
  стена 
 Лицевая сторона блока, на котором она размещена. 
 Пол сверху блока, потолок снизу, стена с одной из его сторон.
  лицом 
  север 
  восток  
  север  
  юг  
  запад 
 Направление, в котором он смотрит. 
 Напротив направления, в котором смотрит игрок, если его поместить сбоку от блока.
  с питанием 
  false 
  false  
  true 
 Если true, кнопка в данный момент активирована.
 Bedrock Edition:
 Имя
 Значение по умолчанию
 Допустимые значения
 Описание
  button_pressed_bit 
  0 
  0  
  1 
 Если кнопка активирована в данный момент.
  face_direction 
  0 
  0  
  1  
  2  
  3  
  4  
  5 
 Направление, на которое обращено.
 Напротив направления, в котором смотрит игрок, если его поместить сбоку от блока.
 
 История [править] 
  Этот раздел статьи является незавершенным.