Цвет кнопки html: Как изменить цвет кнопки в форме?

12.08.2023 alexxlab

Содержание

Почему у кнопки «Отмена» никогда не должно быть цвета

Что именно делает кнопка «Отмена»?

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

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

Нейтральный цвет для нейтральной кнопки

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

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

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

У «Отмены» много имен

Не все кнопки отмены имеют надпись «Отмена», но все они функционируют одинаково. Например, кнопка «Отмена» может иметь надпись «Не сейчас», «Нет, спасибо», «Может быть позже» или «Пропустить», в зависимости от контекста. Если кнопка отменяет какое-либо действие, рассматривайте ее как кнопку «Отмена», поскольку она выполняет ту же функцию.

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

Достаточно серый

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

Чтобы убедиться, что ваша кнопка хорошо читается, проверьте цветовой контраст с помощью инструмента, например, Color Review. Эта утилита сообщит вам, соответствует ли ваш серый стандартам доступности для цвета текста.

Сделать кнопку отмены нейтральной

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

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

17 лекций о разработке интерфейсов Школы разработки интерфейсов Яндекса

Источник

Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].

Изменить цвет кнопки в форме

Меню

Наши новости

Учебник CSS

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

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить — становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет

Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки

Видео уроки

Разместить статью у нас на сайте.

Изменить цвет кнопки в форме — «Формы»

Internet Explorer	Chrome	Opera	Safari	Firefox	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

Кнопка внутри формы (тип кнопки = «отправить»)

Просто измените фон и цвет:

См.

перо #1 Просто поменяйте фон и цвет — button type=»submit» by kirill (@kirivaha) на КодПене.

Измените его с помощью псевдоэлемента :before ( обратите внимание на диапазон , который вы хотите поместить внутрь кнопки ):

См. перо Измените фон с помощью :before — button type=»submit» by kirill (@kirivaha) на КодПене.

Кнопка внутри формы (тип ввода = «отправить»):

Тот же принцип, что и выше, но вместо button[type=»submit»] нужно прописать input[type=»submit»] в CSS

Кнопка как отдельный элемент в html коде:

Просто поменяйте фон и цвет:

См. перо Изменить цвет кнопки — обычный div от kirill (@kirivaha) на КодПене.

А теперь меняем цвет с помощью псевдоэлемента :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.

Пример

9010 0

Реквизит

Обязательно

onPress

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

Тип
({nativeEvent: PressEvent})

Обязательный

заголовок

Текст для отображения внутри кнопки. На Android данный заголовок будет преобразован в верхний регистр.

Тип
строка

accessibilityLabel

Текст для отображения функций доступности для слепых.

Тип
строка

accessibilityLanguage

iOS

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

Дополнительную информацию см. в документе iOS accessibilityLanguage .

Тип
строка

accessibilityActions

Действия специальных возможностей позволяют вспомогательным технологиям программно вызывать действия компонента. Свойство accessibilityActions должно содержать список объектов действия. Каждый объект действия должен содержать имя поля и метку.

Дополнительную информацию см. в руководстве по специальным возможностям.

Тип	Обязательно
Массив	Нет

9 0100

onAccessibilityAction

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

Дополнительную информацию см. в руководстве по специальным возможностям.

Тип	Требуется
Функция	№

9 0100

цвет

Цвет текста (iOS) или цвет фона кнопки (Android).

Тип	По умолчанию
цвет	`’#2196F3’` Android 901 00 `'#007AFF'` iOS

отключено

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

Тип	по умолчанию
Bool	`False`

hasTVPreferredFocus

ТВ

ТВ предпочтительный фокус.

9 0124

Тип	По умолчанию
bool	`false`

nextFocusDown

Android

Назначает следующий вид для получения фокуса при навигации пользователя вниз. См. документацию Android.

Тип
номер

nextFocusForward

Android

Назначает следующее представление для получения фокуса при переходе пользователя вперед. См. документацию Android.

Тип
номер

nextFocusLeft

Android

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

Цвет кнопки html: Как изменить цвет кнопки в форме?

Почему у кнопки «Отмена» никогда не должно быть цвета

Нейтральный цвет для нейтральной кнопки

У «Отмены» много имен

Достаточно серый

Сделать кнопку отмены нейтральной

Изменить цвет кнопки в форме

Учебник CSS

Самоучитель CSS

Новости

Справочник CSS

Афоризмы

Изменить цвет кнопки в форме — «Формы»

Задача

Решение

Как изменить цвет кнопки: полная инструкция для начинающих

Кнопка внутри формы (тип кнопки = «отправить»)

Кнопка внутри формы (тип ввода = «отправить»):

Кнопка как отдельный элемент в html коде:

Кнопка в Bootstrap

Как изменить цвет кнопки с помощью JS

Кнопка · React Native

Пример​

Реквизит​

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

Пример

Реквизит