Почему у кнопки «Отмена» никогда не должно быть цвета
Что именно делает кнопка «Отмена»?
Он закрывает текущий экран пользователя и возвращает его к предыдущему состоянию. Эта кнопка является защитой от нежелательных изменений в системе. Но когда она похожа на кнопку действия, эту функцию защиты трудно распознать.
Кнопка «Отмена» должна символизировать возвращение к безопасному состоянию, а не призыв к действию. Другими словами, ваша кнопка “Отмена” никогда не должна быть цветной.
Нейтральный цвет для нейтральной кнопки
Цвет кнопки означает призыв к действию. Кнопка «Отмена» не является призывом к действию, поскольку после нажатия пользователем никаких изменений в системе не происходит. Вы не должны подчеркивать это цветом, или вы создадите у пользователей неправильное впечатление. Вместо этого вы должны сообщить им, что кнопка не будет вносить никаких изменений и является отказом от действия.
Кнопка «Отмена» должна иметь нейтральный цвет, чтобы обозначать нейтральную, не совершающую действий кнопку. Когда пользователи видят, что кнопка «Отмена» не имеет цвета, они распознают ее как запасной, безопасный вариант. Это важно, например, для пользователей, которым необходимо выйти из экрана подтверждения.
Когда у каждой кнопки на экране есть цвет, они конкурируют за внимание. Конкуренция заставляет пользователей дольше обдумывать каждое действие. Если кнопка отмены нейтрального цвета, то она позволяет им быстрее принимать решение, не раздумывая долго. Пользователи, готовые предпринять действия, также не будут отвлекаться на нейтральную кнопку.
У «Отмены» много имен
Не все кнопки отмены имеют надпись «Отмена», но все они функционируют одинаково. Например, кнопка «Отмена» может иметь надпись «Не сейчас», «Нет, спасибо», «Может быть позже» или «Пропустить», в зависимости от контекста. Если кнопка отменяет какое-либо действие, рассматривайте ее как кнопку «Отмена», поскольку она выполняет ту же функцию.
Чем больше кнопок на экране, тем более необходима отмена. Когда все кнопки имеют цвет, выход из ситуации непонятен. Но когда кнопка “Отмена” имеет нейтральный цвет, она делает выбор более интуитивным.
Достаточно серый
При использовании серого цвета на кнопке необходимо сделать его достаточно темным. В противном случае кнопка может выглядеть как отключенная.
Чтобы убедиться, что ваша кнопка хорошо читается, проверьте цветовой контраст с помощью инструмента, например, Color Review. Эта утилита сообщит вам, соответствует ли ваш серый стандартам доступности для цвета текста.
Сделать кнопку отмены нейтральной
Когда большинство пользователей активирует экран подтверждения, они готовы действовать. Но для тех, кто активирует его по ошибке или передумает в процессе, кнопка «Отмена» — это залог безопасности.
Цветная кнопка «Отмена» посылает им неправильные сигналы. Она заставляет пользователей воспринимать себя как призыв к действию, а не как возвращение к безопасности. Сделайте кнопку «Отмена» нейтральной, чтобы пользователям было легче выходить из экранов подтверждения.
17 лекций о разработке интерфейсов Школы разработки интерфейсов Яндекса
Источник
Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].
Изменить цвет кнопки в форме
Меню
Наши новости
Учебник CSS
Невозможно отучить людей изучать самые ненужные предметы.
Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3
Надо знать обо всем понемножку, но все о немногом.
Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы
Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить — становится деканом. (Т. Мартин)
Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода
Самоучитель CSS
Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5
Новости
Блог для вебмастеров
Новости мира Интернет
Ремонт и советы
Все новости
Справочник CSS
Справочник от А до Я
HTML, CSS, JavaScript
Афоризмы
Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы
Видео уроки
Разместить статью у нас на сайте.
Популярные статьи
Наш опрос
Помогли мы вам |
Наши новости
РЕКЛАМА
27-03-2016, 12:34
Изменить цвет кнопки в форме — «Формы»
Internet Explorer | Chrome | Opera | Safari | Android | iOS | |
5.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Задать цвет фона кнопки и цвет текста на ней.
Решение
Оформление кнопки зависит от параметров операционной системы и выбранного браузера. Поэтому одна и та же кнопка может различаться по своему виду в браузере Internet Explorer и Opera. Применение стилевого свойства background не только изменяет цвет фона у кнопки, но также меняет и ее вид, делая кнопку одинаковой в разных браузерах (пример 1).
Пример 1. Цвет кнопки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <metacharset=utf-8"> <title>Цвет кнопки</title> <style> .b1 { background: navy; /* Синий цвет фона */ color: white; /* Белые буквы */ font-size: 9pt; /* Размер шрифта в пунктах */ } </style> </head> <body> <form action="handler.php"> <p><input type="button" value="Обычная кнопка"> <input type="button" value="Синяя кнопка"></p> </form> </body> </html>
Результат примера показан на рис. 1.
Рис. 1. Вид обычной и цветной кнопки в браузере Safari
В данном примере стиль кнопки определяется с помощью пользовательского класса b1, который задается в теге <input> с помощью атрибута class.
Изменение вида кнопки обусловлено применением свойства background или background-color. Смена цвета текста или шрифта на кнопке оставляет исходным вид кнопки, в частности, ее форму и цвет фона.
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Еще новости по теме:
Другие новости по теме:
Комментарии для сайта CackleКак изменить цвет кнопки: полная инструкция для начинающих
🗓️ Обновлено: 08.08.2022
💬Комментарии: 0
👁️Просмотров: 14214
Мы изменим фон и цвет текста кнопки при наведении.
Мы будем использовать два метода. Первый способ — изменить фон и цвет кнопки. Второй — изменить фон кнопки с помощью псевдоэлемента :before
Кнопка внутри формы (тип кнопки = «отправить»)
Просто измените фон и цвет:
![](/800/600/https/www.bootstrapbayblog.com/wp-content/uploads/2014/11/bootstrap-button-styles1.png)
Измените его с помощью псевдоэлемента :before ( обратите внимание на диапазон , который вы хотите поместить внутрь кнопки ):
См. перо Измените фон с помощью :before — button type=»submit» by kirill (@kirivaha) на КодПене.
Кнопка внутри формы (тип ввода = «отправить»):
Тот же принцип, что и выше, но вместо button[type=»submit»] нужно прописать input[type=»submit»] в CSS
Кнопка как отдельный элемент в html коде:
Просто поменяйте фон и цвет:
А теперь меняем цвет с помощью псевдоэлемента :before
См. перо
Измените цвет кнопки с помощью :before — обычный div от kirill (@kirivaha)
на КодПене.
Кнопка в Bootstrap
Вам нужно найти правильный класс (или id), а также правильный порядок вложенности элементов, чтобы изменить цвет кнопки в Bootstrap.
И вы хотите изменить его цвет при наведении. Тогда я бы порекомендовал вам написать в CSS следующее:
.btn.btn-outline-primary:hover { фон: красный; /* Или любой другой цвет */ /* Я бы также изменил цвет границы */ }
Как изменить цвет кнопки с помощью JS
Я покажу вам два способа изменить цвет кнопки при наведении с помощью JavaScript.
Первый способ — добавим класс от нашей кнопки через JS:
См. перо
Изменить цвет кнопки с помощью JS — добавив новый класс от kirill (@kirivaha)
на КодПене.
Второй способ — будем менять стили css прямо в JS:
См. перо Без названия Кирилл (@kirivaha) на КодПене.
Надеюсь, я помог вам понять, как изменить цвет кнопки, когда на нее указывает курсор. В завершение рекомендую посмотреть видео и окончательно прояснить все вопросы.
Кнопка · React Native
Базовый компонент кнопки, который должен хорошо отображаться на любой платформе. Поддерживает минимальный уровень настройки.
Если эта кнопка не подходит для вашего приложения, вы можете создать свою собственную кнопку с помощью Pressable. Для вдохновения посмотрите исходный код компонента Button.
onPress={onPressLearnMore}
title="Подробнее"
color="#841584"
accessibilityLabel="Подробнее об этой фиолетовой кнопке"
/>
Пример
9010 0Реквизит
Обязательно
onPress
Обработчик, который будет вызываться, когда пользователь нажимает кнопку.
Тип |
---|
({nativeEvent: PressEvent}) |
Обязательный
заголовок
Текст для отображения внутри кнопки. На Android данный заголовок будет преобразован в верхний регистр.
Тип |
---|
строка |
accessibilityLabel
Текст для отображения функций доступности для слепых.
Тип |
---|
строка |
accessibilityLanguage
iOS
Значение, указывающее, какой язык должен использоваться программой чтения с экрана, когда пользователь взаимодействует с элементом. Он должен соответствовать спецификации BCP 47.
Дополнительную информацию см. в документе iOS accessibilityLanguage
.
Тип |
---|
строка |
accessibilityActions
Действия специальных возможностей позволяют вспомогательным технологиям программно вызывать действия компонента. Свойство
accessibilityActions
должно содержать список объектов действия. Каждый объект действия должен содержать имя поля и метку.
Дополнительную информацию см. в руководстве по специальным возможностям.
Тип | Обязательно |
---|---|
Массив | Нет |
onAccessibilityAction
Вызывается, когда пользователь выполняет действия доступности. Единственным аргументом этой функции является событие, содержащее имя выполняемого действия.
Дополнительную информацию см. в руководстве по специальным возможностям.
Тип | Требуется |
---|---|
Функция | № |
цвет
Цвет текста (iOS) или цвет фона кнопки (Android).
Тип | По умолчанию |
---|---|
цвет | `’#2196F3’` Android 901 00 '#007AFF' iOS |
отключено
Если true
, отключить все взаимодействия для этого компонента.
Тип | по умолчанию |
---|---|
Bool | False |
hasTVPreferredFocus
ТВ
ТВ предпочтительный фокус.
Тип | По умолчанию |
---|---|
bool | false |
nextFocusDown
Android
TV
Назначает следующий вид для получения фокуса при навигации пользователя вниз. См. документацию Android.
Тип |
---|
номер |
nextFocusForward
Android
TV
Назначает следующее представление для получения фокуса при переходе пользователя вперед. См. документацию Android.
Тип |
---|
номер |
nextFocusLeft
Android
TV
Назначает следующее представление для получения фокуса, когда пользователь перемещается влево.