Нажатая кнопка css: html — Как задать фон нажатой кнопке?

Содержание

Оформляйте стили наведения, фокуса и активного состояния по-разному / Хабр

В течение многих лет я оформлял состояния элементов :hover, :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.

Вот пример кода, который всегда использовал.

.selector {
  &:hover, 
  &:focus,
  &:active {
    ...
  }
}

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

Наведение, фокус и активное состояние должны стилизоваться по-разному.

Причина проста: Это разные состояния!

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

Давайте начнём с :hover.

Стилизация наведения (:hover)

:hover срабатывает, когда пользователь наводит на элемент курсор мыши.

Обычно это состояние заключается в изменении цвета фона background-color и/или текста color. Различия не обязательно должны быть очевидными, потому что пользователи и так знают, что навели курсор на какой-то элемент.

button {
  background-color: #dedede;
}
 
button:hover {
  background-color: #aaa;
}

Стилизация фокуса (:focus)

:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:

при выборе элемента кнопкой «Tab»
при щелчке на элемент мышью

К фокусным элементам относятся:

Ссылки (<a>)
Кнопки (<button>)
Элементы формы (<input>

, <textarea> и т.д)
Элементы с атрибутом tabindex

Следует помнить о некоторых важных моментах:

Пользователи не могут выбрать кнопкой «Tab» элемент с атрибутом tabindex="-1", но могут кликнуть по нему мышью. Клик вызывает состояние фокуса.
В браузерах Safari и Firefox Mac OS клик не вызывает фокус у элементов <button>
При клике на ссылку <a>, фокус остаётся на ней, пока нажата кнопка мыши. Когда вы отпускаете кнопку, фокус перенаправляется в другое место, если в атрибуте href указан существующий на этой же странице id

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

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

В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:

Добавление обводки (outline)
Создание анимаций
Изменение background-color
Изменение color

Поскольку изменение свойств background-color и color часто производится при :hover, имеет смысл состояние :focus оформлять с помощью обводки или анимации.

Вы можете использовать комбинации свойств outline, border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье «Creating a custom focus style».

button {
  background-color: #dedede;
}
 
button:hover {
  background-color: #aaa;
}
 
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px lightskyblue;
}

Стилизация активного состояния (:active)

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

На веб-сайтах этот отклик также полезен. Можно стилизовать момент «нажатия кнопки» с помощью :active. Вызывается это состояние, когда вы взаимодействуете с элементом. Под взаимодействием в данном случае подразумевается:

Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
Удержание кнопки пробела (на кнопках)

button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
}

Две особенности, которые следует принять к сведению:

Удержание пробела вызывает состояние :active у кнопок (<button>), но при удержании Enter этого не происходит

Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще

Стили ссылок по умолчанию

Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными

Взаимосвязь между :active и :focus

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

Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.

Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.

Для ссылок:

При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния :active

и :focus. В Safari – только состояние :active (проверено только на Mac OS)
Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на <body>

Для кнопок:

Когда вы удерживаете левую кнопку мыши: оба состояния :active и :focus вызываются только в Chrome. Состояние :focus совсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.

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

 document.addEventListener('click', event => {
  if (event.target.matches('button')) {
    event.target.focus()
  }
})

Добавление этого кода изменит поведение нажатия кнопок на следующее:

При удержании кнопки мыши, :active вызывается во всех браузерах, :focus только в Chrome
Если отпустить кнопку мыши, вызывается :focus в Safari и Firefox (Mac OS). :focus остаётся на кнопке во всех браузерах

Поведение кнопок в Safari после добавления фрагмента JS-кода

Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх

Волшебная комбинация

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

.element:hover,
.element:active {
  /* Изменить цвет фона/текста  */
}
 
.element:focus {
  /* Показать обводку */
}

Для пользователей мыши:

Когда пользователь наводит на элемент, меняется background-color (и/или color). Происходит отклик.
Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.

Для пользователей клавиатуры:

Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.
Когда они взаимодействуют с элементом, меняется background-color (и/или color). Происходит отклик.

Лучшее из обоих миров!

Я не проверял тщательно магическую комбинацию.Это лишь аргумент в пользу этой концепции концепции. Буду признателен, если вы поможете мне проверить её и дадите знать о возможных проблемах.
Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.

Не волшебная (но может даже лучше) комбинация

Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.

Вот что произойдёт в Safari и Firefox на Mac OS:

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

Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.

Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover, :focus и :active по отдельности.

.element:hover {
  /* Изменить цвет фона/текста  */
}
 
.element:active {
  /* Иные изменения в цвете фона и текста */
}
 
.element:focus {
  /* Показать обводку */
}

Поведение кнопки в Safari, если были стилизованы все три состояния

Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.

Тег button

Пример

Нажатая кнопка помечается следующим образом:

<button type=»button»>Нажмите меня!</button>

Определение и использование

Тег <button> определяет нажатую кнопку.

Внутри элемента <button> можно поместить содержимое, например текст или изображения. Это различие между этим элементом и кнопками, созданными с помощью элемента <input>.

Совет: Всегда указывайте атрибут Type для элемента < Button >. Различные обозреватели используют различные типы по умолчанию для элемента <button>.

Совет: Кнопки часто стилизованы под CSS:

Поддержка браузера

Элемент
<button>	Да	Да	Да	Да	Да

Советы и примечания

Примечание: При использовании элемента <button> в HTML-форме различные обозреватели могут отправлять различные значения. Использовать <input> для создания кнопок в форме HTML.

Совет: Посетите наш CSS кнопки учебник чтобы узнать, как стиль кнопок с CSS.

Различия между HTML 4,01 и HTML5

HTML5 имеет следующие новые атрибуты: автофокусировка, форма, формактион, форменктипе, форммесод, formnovalidate и формтаржет.

Атрибуты

= Новые в HTML5.

Атрибут	Значение	Описание
autofocus	autofocus	Указывает, что кнопка должна автоматически получать фокус при загрузке страницы
disabled	disabled	Указывает, что кнопка должна быть отключена
form	form_id	Указывает одну или несколько форм, к которым принадлежит кнопка
formaction	URL	Указывает, куда отправлять данные формы при отправке формы. Только для type=»submit»
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Задает способ кодирования данных формы перед отправкой на сервер. Только для type=»submit»
formmethod	get post	Указывает способ отправки данных формы (используемый метод HTTP). Только для type=»submit»
formnovalidate	formnovalidate	Указывает, что данные формы не должны проверяться при отправке. Только для type=»submit»
formtarget	_blank _self _parent _top framename	Указывает, где отображать ответ после отправки формы. Только для type=»submit»
name	name	Задает имя кнопки
type	button reset submit	Указывает тип кнопки
value	text	Задает начальное значение для кнопки

Глобальные атрибуты

Тег <button> также поддерживает Глобальные атрибуты в HTML.

Атрибуты события

Тег <button> также поддерживает Атрибуты событий в HTML.

Параметры CSS по умолчанию

Нет.

Создание трехмерной нажимаемой кнопки с использованием CSS3

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

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

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

Демонстрация работы

Создаем кнопку

Код HTML для этой кнопки очень простой, так как весь эффект создается с помощью кода CSS, нужно только создать ссылку класса .push_button:

<a href="#">
	Push Me
</a>

Код CSS

В коде CSS сначала зададим стили ссылке, чтобы она выглядела, как кнопка, после этого создадим активное событие для кнопки.

Скопируйте следующий код, чтобы создать внешний вид кнопки:

/**************************************************** * Push Button *****************************************************/
.push_button{
	position:relative;
	width:200px;
	color:#FFF;
	display:block;
	text-decoration:none;
	margin:0 auto;
	border-radius:5px;
	border:solid 1px #D94E3B;
	background:#cb3b27;
	text-align:center;
	padding:20px 30px;

	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	-webkit-box-shadow: 0px 9px 0px #84261a;
        -moz-box-shadow: 0px 9px 0px #84261a;
        box-shadow: 0px 9px 0px #84261a;
}

После этого кнопка выглядит так:

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

Скопируйте следующий код, чтобы создать эффект при нажатии кнопки:

.push_button:active{
    -webkit-box-shadow: 0px 2px 0px #84261a;
    -moz-box-shadow: 0px 2px 0px #84261a;
    box-shadow: 0px 2px 0px #84261a;
    position:relative;
    top:7px;
}

Нажатая кнопка выглядит так:

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

Сдвиг кнопки вверх на 7 пикселей создает видимость нажатия в дополнение к уменьшению размера тени блока.

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

Демонстрация работы

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также:

Кнопки в Bootstrap / uCozMagazines.ru

Сергей 24.01.2017 1295 5.0 из 5.0 (5)
Оцените материал:
Цель урока
Получить ключевую информацию для применения кнопок на сайте. Знакомство с HTML тегами, которые используются для кнопок.
Обзор возможностей по оформлению кнопок: размер, цвет, состояние.
Кнопка или ссылка?
В классическом понимании web’а, кнопки — управляющий элемент интерфейса, который меняет состояние содержимого на сайте. Когда элемент меняет адрес страницы, он является ссылкой, ведь ссылки для этого и предназначены.
Ссылка и кнопка — не одно и то же.
Однако, привычной стала практика, когда для придания ссылкам акцента, их оформляют как кнопки. Или другой пример, когда отправка формы ведет к смене адреса страницы. С другой стороны, некоторые веб-мастера злоупотребляют оформлением кнопок, считая что таким образом может выглядеть заголовок блока или важная мысль.
Перед тем, как вы начнете добавлять кнопки на сайт, запомните: тег a с атрибутом href в большинстве случаев можно оформить как обычную ссылку. Выделяйте только важные элементы, чтобы от них не рябило в глазах.
Теги кнопок
Как кнопки могут быть оформлены следующие HTML-теги: <a>, <button> или <input>.
Ссылка Кнопка
<a href="#" role="button">Ссылка</a> <button type="submit">Кнопка</button> <input type="button" value="Кнопка"> <input type="submit" value="Отправка">
Обратите внимание кнопка имеет два класса .btn и .btn-default, они указываются через пробел. Чуть позже в этом уроке, вы поймете, почему так.
Стилизация кнопок
Для стилизации кнопок, используются CSS классы. Так .btn-default в предыдущем примере оформляет кнопку «по умолчанию». Модель кнопок в Bootstrap имеет поведенческий фактор, т.е. цвет кнопке назначается в зависимости от того, какое событие она вызывает. Отсюда и названия классов. Пример:
Default Primary Success Info Warning Danger Link
 <button type="button">Default</button>  <button type="button">Primary</button>  <button type="button">Success</button>  <button type="button">Info</button>  <button type="button">Warning</button>  <button type="button">Danger</button>  <button type="button">Link</button>
Возможно, вам покажется, что набор цветов ограничен, но в последующих уроках мы еще выясним, как задать свою палитру для всех элементов фреймворка.
Размеры кнопок
Размер кнопки может быть задан за счет добавления CSS класса: .btn-lg, .btn-sm или .btn-xs.
Пример:
Большая кнопка Большая кнопка
Обычная кнопка Обычная кнопка
Маленькая кнопка Маленькая кнопка
Очень маленькая кнопка Очень маленькая кнопка
Исходный код:
<p> <button type="button">Большая кнопка</button> <button type="button">Большая кнопка</button> </p> <p> <button type="button">Обычная кнопка</button> <button type="button">Обычная кнопка</button> </p> <p> <button type="button">Маленькая кнопка</button> <button type="button">Маленькая кнопка</button> </p> <p> <button type="button">Очень маленькая кнопка</button> <button type="button">Очень маленькая кнопка</button> </p>
Обратите внимание, ширина кнопок устанавливается в соответствии с их содержимым (текстом). Когда нужна кнопка на всю доступную ширину, можно использовать класс .btn-block:
Кнопка на всю ширину Кнопка на всю ширину
Исходный код:
<button type="button">Кнопка на всю ширину</button> <button type="button">Кнопка на всю ширину</button>
Состояния кнопок
После нажатия кнопка меняет свое состояние на активное, для этого в CSS есть даже специальный псевдо-класс ::active. Чтобы сделать кнопку активной принудительно, можно добавить к ней класс .active:
Нажатая кнопка Обычная кнопка
<button type="button">Активная кнопка</button> <button type="button">Обычная кнопка</button>
Еще одно состояние — выключенная кнопка:
Кнопка выключена Кнопка выключена Обычная кнопка
Этого можно добиться за счет класса .disabled или атрибута кнопки disabled="disabled". Последний, кстати, не работает для <a>:
<button type="button" >Кнопка выключена</button> <button type="button" disabled="disabled">Кнопка выключена</button> <button type="button">Обычная кнопка</button>
На этом урок окончен. Вы еще не раз вернетесь к нему, когда будете работать непосредственно с шаблоном сайта. Поэтому рекомендую добавить урок в закладки.
Упражнения
Добавьте кнопку на сайт с помощью различных HTML-тегов. Поменяйте текст кнопки, проверьте как она работает.
Разберитесь с контекстуальным оформлением кнопок. Так ваши пользователи быстро начнут понимать, чего ждать от той или иной кнопки.
Попробуйте изменить размер кнопок. Большие кнопки уместны для оформления ключевых блоков страницы. Маленькие — отлично подойдут для форм, например, при управлении заказами.
Важно, чтобы вы знали, что существует возможность менять состояние кнопок за счет CSS классов. Это поможет в дальнейшем при более глубокой проработке шаблона.
Посмотрите исходный код кнопки добавления в корзину $2BASKET$ и попробуйте заменить ее на свою.
Оцените материал:
Расскажите друзьям и коллегам о полезной статье:
Краткая памятка по верстке кнопок в Bootstrap
Способы создания кнопок
В Bootstrap можно создавать кнопки четырьмя разными способами. Они перечислены ниже:
<button>Кнопка как тег button</button>
<input type=»submit» value=»Кнопка отправки формы»>
<input type=»button» value=»Кнопка как элемент input»>
<a href=»/login» role=»button»>Ссылка как кнопка</a>
Кнопки, созданные этими способами, будут выглядеть одинаково. Для обозначения принадлежности внешнего вида кнопок к тому или иному дествию, используются следующие классы:
btn-default — обычная кнопка
btn-primary — основная кнопка
btn-success — кнопка подтверждения
btn-info — кнопка уведомления
btn-warning — кнопка предупреждения
btn-danger — кнопка опасности
btn-link — кнопка будет выглядеть как ссылка
Каждый такой класс будет влиять на цвет кнопки и шрифт надписи.
Размеры кнопок
Для изменения размеров кнопок используются следующие классы:
btn-xs — маленькая кнопка
btn-sm — небольшая кнопка
btn-md — кнопка средних размеров
btn-lg — большая кнопка
Что бы растянуть кнопку по горизонтали на все свободное пространство, можно воспользоваться классом btn-block.
Нажатая кнопка и заблокированная кнопка
Можно менять видимое состояние кнопки. Например, если нужно отобразить кнопку нажатой, то можно добавить класс active. Если нужно отобразить кнопку как запрещенную для нажатий, ей нужно добавить класс disabled.
Группы кнопок
Если нужно сделать, чтобы несколько кнопок отображалось как группа кнопок, расположенных рядом, без разделителей, то такие кнопки можно поместить в специальный блок:
<div>
…
</div>
Группам кнопок можно задавть размер. Тогда все кнопки в группе становятся нужного размера.
btn-group-xs — группа маленьких кнопок
btn-group-sm — группа небольших кнопок
btn-group-md — группа кнопок средних размеров
btn-group-lg — группа больших кнопок
Вместо стандартного горизонтального объединения кнопок, можно задать вертикальное объединение. То есть, кнопки выстроятся по вертикали. Для этого группе кнопок надо вместо класса btn-group задать класс btn-group-vertical.
tkinter события
Всем привет. В первой статье по питону мы с вами уже использовали метод обработки события ‘клик левой кнопки мыши’, пример:
from tkinter import * window = Tk() button = Button(text="Нажмите") def fun(event): print("кнопка нажата") button.bind("<Button-1>", fun) button.pack() window.mainloop()
Здесь в окне программы есть кнопка ‘Нажмите’. И если мы ее нажмем у нас в консоль выведется сообщение ‘кнопка нажата’. Установка обработчика события на кнопку происходит через метод bind() в котором указываются два аргумента:
— событие, в нашем случае это — нажатие левой кнопки мыши.
— название функции, которая будет вызвана при обработке события
Заметьте что в функции которую мы вызываем через обработчик должен быть обязательно аргумент event(объект события).
Отмечу что обработчик событий через метод bind() мы можем вешать на любые элементы:
window = Tk() def fun(event): print("Клик левой кнопкой мыши") window.bind("<Button-1>", fun)
Здесь мы повесили обработчик события на главное окно программы. И теперь при клике по окну нашей программы у нас в консоль будет выводится сообщение.
С общей концепцией работы обработчика мы разобрались теперь давайте перейдем к рассмотрению других событий. До этого момента мы рассмотрели клик левой кнопки мыши , теперь:
def fun(event): print("Клик средней кнопки мыши(колесико)") window.bind("<Button-2>", fun)
Здесь у нас уже при клике колесика мыши выводится сообщение. За клик средней кнопки мыши отвечает событие .
За прокрутку колесика мыши
def fun(event): print("Прокрутка колесика мыши") window.bind("<MouseWheel>", fun)
событие .
За правую кнопку мыши:
def fun(event): print("Клик правой кнопкой мыши") window.bind("<Button-3>", fun)
отвечает событие .
Также есть двойной щелчок левой кнопки мыши:
def fun(event): print("Двойной клик левой кнопки мыши") window.bind("<Double-Button-1>", fun)
здесь используется событие и как я думаю не трудно догадаться что если мы напишем то это будет двойной клик средней кнопки мыши и двойной клик правой кнопки мыши.
Еще мы можем отслеживать событие перемещения мыши:
def fun(event): print("Мышка перемещается по окну программы") window.bind("<Motion>", fun)
За перемещение мыши отвечает событие .
Итак с событиями мыши мы более или менее разобрались теперь переходим к клавишам:
def fun(event): print('Нажата клавиша Enter') window.bind("<Return>", fun)
За обработку нажатия клавиши Enter отвечает событие .
Обработка нажатия пробела происходит
def fun(event): print('Нажата клавиша пробел') window.bind("<space>", fun)
через событие . Как вы наверное уже поняли мы можем в качестве события указывать любую латинскую клавишу:
def fun(event): print('Нажата клавиша символа s') window.bind("<s>", fun)
Для обработки всех клавиш мы можем воспользоваться событием
def fun(event): print("Нажата клавиша "+event.char) window.bind("<Key>", fun)
Заметьте что у нас выводятся только символьные и цифровые клавиши. Однако если мы просмотрим объект события event, то увидим что специальные клавиши также обрабатываются этим событием.
def fun(event): print(event) window.bind("<Key>", fun)
На этом дорогие друзья у меня на сегодня все.
Желаю удачи и успехов! Пока!
Галина
16:36 28-01-2021
Статья никакая: какой print? Вы для кого его вообще пишете в графическом интерфейсе?
Вячеслав
12:37 27-05-2020
Все бы так материал излагали. Спасибо большое!
Евгений
14:41 05-10-2019
Перезвоните мне пожалуйста по номеру. 8 (965) 796-46-17 Евгений.
Антон
21:22 21-07-2019
Перезвоните мне пожалуйста по номеру 8(812)454-88-83 Нажмите 1 спросить Вячеслава.
Оформляем кнопки с Bootstrap | Vaden Pro
Представить себе сайт без кнопок практически не реально, да и просто не нужно. Оформление каждого такого элемента не несет в себе никакой сложности, редко блещет креативом, но все-же занимает наше время.
Данный урок посвящен тому, как воспользовавшись Twitter Bootstrap, сделать на сайте подходящие нам кнопки даже не за минуты, а за считанные секунды.
Какие теги мы можем оформлять как кнопки?
Накладывать оформление от кнопок мы можем на следующие элементы:
<button> – собственно сами кнопки
<input type="button"> — кнопки в формах
<a> — ссылки, которые мы хотим оформить под кнопки
После применения к ним соответствующих классов выглядеть они будут абсолютно одинаково.
Что необходимо, чтобы оформить кнопку?
Для этого на выбранный нами тег нужно повесить класс .btn (создаст сам контейнер кнопки) и класс с оформлением кнопки. Какие классы доступны для этого будет рассмотренно ниже.
Комбинированием классов отвечающих за внешний вид и размер кнопки мы можем сразу подогнать ее под наши нужды.
Выбираем оформление
Исходно в наше распоряжение поступает семь разновидностей оформления кнопок, за каждый из которых отвечает свой класс.
Так, для получения этого скриншота:
Был использован следующий код:
<button type="button">Оформление 1</button> <button type="button">Оформление 2</button> <button type="button">Оформление 3</button> <button type="button">Оформление 4</button> <button type="button">Оформление 5</button> <button type="button">Оформление 6</button> <button type="button">Оформление 7</button>
Остановимся подробнее на каждом классе:
.btn-default – белая кнопка с серой окантовкой и светло-серым наведением
.btn-primary – синяя кнопка, при наведении становится темно-синей
.btn-success – зеленая кнопка, при наведении становится темно-зеленой
.btn-info – голубая кнопка, при наведении темнеет
.btn-warning – кнопка в оранжевых тонах
.btn-danger – кнопка в красных тонах
.btn-link –кнопка без фона и обводки
Задаем размер
Стандартно в Bootstrap используется 4 категории классов отвечающих за размер элементов:
lg— большие
md— средние (применяется стандартно, если размер не задан классом)
sm- маленькие
xs— очень маленькие
В отношении кнопок чтобы составить класс отвечающий за ее размер нужно к .btn через дефис добавить категорию размера к примеру .btn-xs.
На практике это выглядит следующим образом:
<button type="button">Размер lg</button> <button type="button">Размер md</button> <button type="button">Размер sm</button> <button type="button">Размер xs</button>
Так, последний класс у наших элементов и задает им выбранный нами размер.
Визуально это выглядит следующим образом:
Блочные кнопки
Также у нас есть возможность создания блочных кнопок, которые будут масштабироваться под размер родительского контейнера.
Для их создания к обычной кнопке нужно добавить класс .btn-block:
<button type="button">Блочная кнопка</button>
Получим:
Кнопки с заданным состоянием
Помимо всего прочего мы можем задать фиксированное состояние, в котором они не будут реагировать на клики мышки, наведение и тд.
Для этого можно воспользоваться следующими классами:
.active – активная (нажатая) кнопка
.disabled – заблокированная кнопка
Визуально они выглядят следующим образом:
Код с примера:
<button>Нажатая кнопка</button> <button>Заблокированная кнопка</button>
Подводя итоги
Если мы хотим добавить эксклюзивности конкретной кнопке и, к примеру, сделать ее в нестандартном цвете и с необычным шрифтом текста, то мы всегда можем перекрыть необходимые нам стили из нашего файла CSS. В любом случае это будет гораздо быстрее, чем прописывать все вручную.
Как не сложно заметить любое оформление кнопки получается из простого комбинирования классов рассмотренных в данном уроке у тега.
Оценок: 7 (средняя 4.4 из 5)
16980 просмотров
Понравилась статья? Расскажите о ней друзьям:
Еще интересное
Состояние нажатой кнопки с помощью CSS
ПРИМЕЧАНИЕ. Я рассмотрел оформление ссылок кнопок с помощью CSS3 в более поздней публикации, которую вы можете прочитать здесь. Следующий пост представляет собой более старый метод с использованием изображений.
В CSS есть определенное состояние привязки, которое я не вижу часто используемым — на самом деле, это то, чем я сам на самом деле не пользовался, но кое-что, что я теперь понимаю, может быть очень полезным. Я говорю об «активном» состоянии привязки.
Активное состояние привязки — это состояние, в котором находится привязка (ссылка), когда вы нажимаете на нее.В тот момент, когда вы нажимаете на ссылку, она становится активной. Все мы используем состояния «наведен» или «посещен», но активное состояние может оказаться очень полезным, если у вас есть кнопки с настраиваемым стилем.
Вы видите, что на рабочем столе, будь то в Windows, Linux или OS X, кнопки реагируют на вас, когда вы нажимаете на них. Они заметно давят, говоря вам, что вы их толкнули. Это обеспечивает удовлетворительную обратную связь с пользователем и делает приложение более отзывчивым.
В сети такая обратная связь дается редко.Вы нажимаете кнопку, и ничего не происходит. В некоторых браузерах вы увидите выделенную рамку вокруг ссылки или кнопки во время загрузки следующей страницы. Даже кнопки с настраиваемыми фоновыми изображениями, делающими их похожими на большие сплошные кнопки, ничего не делают, когда вы их нажимаете. Они остаются статичными и не отвечают.
Так не должно быть. Просто используйте «активное» состояние, чтобы придать вашим кнопкам «нажатый» вид или любой другой вид, который вы хотите. Это выделит ваше приложение или веб-сайт среди остальных, поскольку интерфейс будет ближе к тому, с чем пользователь знаком на рабочем столе, а не в Интернете.
Хорошо, хватит болтовни, вот что ты делаешь:
Допустим, в вашем приложении есть кнопка, которая использует настраиваемое изображение. Разметка будет выглядеть примерно так:
Это пустой якорь с идентификатором. Мы можем использовать этот идентификатор для стилизации якоря. Тогда наш CSS будет выглядеть так:
#button { дисплей: блок; ширина: 135 пикселей; высота: 43 пикселя; фон: url (button.png) сверху без повтора; }
Мы просто превращаем встроенный якорь в блок, задаем ему ширину и высоту и устанавливаем фоновое изображение.Кнопка будет выглядеть так:
Чтобы добавить активное состояние, просто добавьте «: active» после селектора привязки:
#button: active { фон: url (button.png) нижняя часть без повтора; }
Поскольку мое изображение содержит оба состояния привязки, мы просто сдвигаем положение фона вниз, что меняет вид кнопки на это:
Вот изображение, о котором я говорю, а вот живая демонстрация.
Сообщите мне, что вы думаете.Я определенно хотел бы, чтобы в сети использовались более активные состояния. С помощью всего лишь пары строк CSS вы можете сделать свой сайт или приложение более отзывчивым.
[Обновление от 16 декабря 2008 г.] Уильям разместил полезную ссылку в комментариях, чтобы включить класс «: active» в IE. Вот исправление .
Расширенный стиль и анимация кнопок SwiftUI
Узнайте, как стилизовать кнопки SwiftUI с использованием протокола ButtonStyle и модификатора .buttonStyle () путем создания повторно используемых стилей кнопок.Использование протокола ButtonStyle позволяет создавать расширенные стили кнопок и вводить анимацию в стиль кнопки при ее нажатии.
Начнем с простой кнопки:
Кнопка (действие: { print ("Действие кнопки") }) { HStack { Изображение (systemName: "bookmark.fill") Текст («Закладка») } }
Базовая кнопка SwiftUI
Теперь давайте создадим новую структуру под названием GradientButtonStyle, которая реализует протокол ButtonStyle и применяет градиент к дизайну кнопки / цвету фона:
struct GradientButtonStyle: ButtonStyle { func makeBody (конфигурация: Self.Конфигурация) -> некоторый вид { ярлык конфигурации .foregroundColor (Цвет. белый) .padding () .background (LinearGradient (gradient: Gradient (colors: [Color.red, Color.orange]), startPoint: .leading, endPoint: .trailing)) .cornerRadius (15.0) } }
И примените новый стиль с помощью модификатора .buttonStyle () к кнопке:
Кнопка (действие: { print ("Действие кнопки") }) { HStack { Изображение (systemName: "закладка.наполнять") Текст («Закладка») } } .buttonStyle (GradientButtonStyle ())
Кнопка SwiftUI с градиентным фоном
Объект конфигурации, доступный внутри метода makeBody, содержит метку и свойства экземпляра isPressed. Свойство метки дает вам доступ к представлению метки кнопки, которое вы можете изменить с помощью желаемых модификаторов. Свойство isPressed позволяет понять, нажата ли кнопка на самом деле или нет.
Чтобы анимировать размер кнопки при ее нажатии, мы будем использовать расширение.Модификатор scaleEffect () в сочетании со свойством isPressed путем изменения масштаба на основе значения isPressed:
.scaleEffect (configuration.isPressed? 1.3: 1.0)
Масштабируемая кнопка SwiftUI при нажатии
Новая структура GradientButtonStyle, которая также анимирует размер кнопки, теперь выглядит так:
struct GradientButtonStyle: ButtonStyle { func makeBody (configuration: Self.Configuration) -> some View { конфигурация.метка .foregroundColor (Цвет. белый) .padding () .background (LinearGradient (gradient: Gradient (colors: [Color.red, Color.orange]), startPoint: .leading, endPoint: .trailing)) .cornerRadius (15.0) .scaleEffect (configuration.isPressed? 1.3: 1.0) } }
Следуя аналогичной схеме, вы можете изменить цвет фона кнопки при ее нажатии:
.background (configuration.isPressed? Цвет. Зеленый: Цвет.желтый)
Цвет фона анимированной кнопки SwiftUI
Связанные руководства:
Как убрать кнопки фокуса вокруг щелчка
Фрагменты
›
HTML
›
Как убрать кнопки фокуса вокруг щелчка
Решения со свойством контура CSS ¶
Если вы хотите удалить сосредоточиться вокруг кнопки, вы можете использовать свойство контура CSS. Вам необходимо установить значение «нет» для свойства контура.
Пример удаления фокуса вокруг кнопки: ¶
Название документа <стиль> .button: focus { наброски: нет; } <кнопка> Нажмите здесь
Попробуйте сами »
Результат
Щелкните здесь
Однако делать это не рекомендуется, если у вас нет хорошего согласованного состояния для кнопок и входов.
Давайте посмотрим на другой пример, в котором мы добавляем небольшой стиль к элементу

Попробуйте сами »
Ниже вы можете найти другой пример, в котором мы убираем фокус вокруг тега HTML .Мы устанавливаем отображение тега на «встроенный блок».
Пример удаления фокуса вокруг тега HTML
: ¶
Название документа <стиль> a { цвет фона: светло-голубой; текстовое оформление: нет; размер шрифта: 20 пикселей; граница: нет; курсор: указатель; наброски: нет; отступ: 10 пикселей 30 пикселей; дисплей: встроенный блок; } Нажмите кнопку ниже и начните изучать Git.Изучите Git
Попробуйте сами »
В нашем последнем примере мы убираем фокус вокруг тега HTML . Здесь мы используем псевдокласс: focus для элемента и устанавливаем для свойств outline и box-shadow значение «none». Также обратите внимание, что мы используем псевдоэлемент :: — moz-focus-inner, который является расширением Mozilla.
Пример удаления фокуса вокруг тега HTML
: ¶
Название документа <стиль> Вход { размер шрифта: 18 пикселей; курсор: указатель; граница: нет; дисплей: встроенный блок; отступ: 10 пикселей 20 пикселей; } input: focus { наброски: нет; тень коробки: нет; } input :: - moz-focus-inner { граница: 0; }
Попробуйте сами »
:: — moz-focus-inner нестандартен, и его не рекомендуется использовать на рабочих сайтах, обращенных к Интернету, так как он не будет работать для каждого пользователя.

Спасибо за отзыв!
Считаете ли вы это полезным? Да Нет
Статьи по теме
10 пользовательских фрагментов кода CSS и JavaScript для эффектов наведения и клика
Разработчики могут создавать сумасшедшие эффекты с помощью простых действий пользователя, таких как наведение курсора и щелчки мышью. В основном они относятся к пользователям настольных компьютеров, но мобильный Интернет также поддерживает эффекты щелчка / касания в большинстве браузеров.
Если вы ищете интересные идеи для воплощения в своих проектах, то в этой коллекции обязательно найдется что-то для вас.Любой, кто немного знаком с JavaScript и CSS, может легко настроить эти эффекты для работы в любом браузере, на любом веб-сайте и улучшить впечатление от макета.
Панель инструментов веб-дизайнера
Неограниченное количество скачиваний: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многое другое!
Эффекты при наведении курсора на кнопку
Очевидной отправной точкой для анимационных эффектов являются кнопки CSS. Они наиболее практичны в повседневном использовании, поскольку обеспечивают большую интерактивность.Кнопки с призывом к действию практически требуют внимания, и с этими эффектами наведения вы можете привлечь внимание еще быстрее.
Каждый эффект использует чистый CSS для анимации. Некоторые из этих кнопок используют JavaScript для событий наведения указателя мыши, но все анимации по-прежнему контролируются прямо в CSS.
Если вы создаете плоский макет, с этой анимацией будет очень легко работать.
Nav Hovers
Для этого пера вы найдете несколько событий при наведении курсора.Они полагаются на чистый CSS, который снова управляет каждой гиперссылкой с различным эффектом наведения.
Меню навигации обычно очень простые и универсальные. Вот почему события наведения действительно могут оживить дизайн и показать посетителям, что вы заботитесь о мелких деталях.
Большинство этих анимаций достаточно просты, чтобы поместиться на любом веб-сайте, поэтому они отлично подходят для простого копирования / вставки в любой макет.
Эффекты наведения фото
Как часто вы находите фотогалереи со скучными субтитрами и без реального контекста? Я вижу их слишком часто, и им просто лень.
Мне очень нравятся эти фотоэффекты, все они основаны на простой галерее миниатюр. При наведении курсора на изображение вы увидите название фотографии, ее описание и кнопку «Подробнее».
Каждый элемент открывается в поле зрения под разными углами, и это помогает галерее изображений сразу же появляться на странице.
Всплывающая подсказка CSS
Каждый браузер поддерживает всплывающие подсказки по умолчанию, но вы всегда можете создать свои собственные, используя плагины или клонируя такие ручки. Он был разработан Тай Стронгом и показывает, насколько далеко можно зайти в подсказках на чистом CSS.
Весь этот фрагмент работает, ориентируясь на тег HTML . При наведении курсора на любой текст, заключенный в этот тег, он автоматически исчезает при наведении курсора и появляется как всплывающая подсказка.
Треугольники
на чистом CSS существуют уже много лет, поэтому воссоздать стиль всплывающей подсказки достаточно просто. Но больше всего меня впечатлили плавные состояния анимации, которые контролируются с помощью CSS3.
Иконки CSS при наведении
Вот еще один пример того, что можно сделать с помощью чистого CSS.Все эти простые кнопки имеют скрытые значки, которые появляются только тогда, когда на них оказывается курсор.
Каждый значок взят из Font Awesome, поэтому вы можете воспроизвести этот дизайн с помощью совершенно бесплатных значков.
Эффекты включают в себя слайд-ин, растягивание и исчезающие значки, которые появляются при наведении курсора и исчезают, когда курсор перемещается в другое место.
Бесконечная разбивка на страницы
Веб-разбиение на страницы всегда довольно скучно, вероятно, потому, что это не кричащая часть интерфейса. Но с этим эффектом разбивки на страницы Мариуша Дабровски вы можете вывести вашу разбивку на страницы на новый уровень.
Единственное, что в этой анимации — это то, что она загружается с одной страницы на другую. Таким образом, он лучше всего работает с страницами на базе Ajax , когда вся страница не перезагружается. Таким образом, вся анимация будет видна, пока новое содержимое загружается в поле зрения.
Определенно имеет ограниченную практическую ценность, но эффект великолепен.
Overlay Nav Animation
Полноэкранные навигационные меню очень популярны для мобильных веб-сайтов, и они работают и для большинства пользователей.Но они не должны быть скучными или статичными, если у вас есть такие эффекты наложения бесплатно на CodePen.
Разработчик Райан Маллиган создал эту чудовищную анимацию с ключевыми кадрами на чистом CSS, работающими в одном классе CSS.
Событие щелчка запускается через jQuery, но движение — это все CSS. Определенно одна из самых крутых анимаций, которые я видел, и она на удивление гладкая при загрузке.
Эффект клика на чистом CSS
Материальный дизайн Google включает в себя несколько анимационных эффектов, один из которых — эффект пульсации щелчка.Это чаще всего встречается на устройствах Android, но просочилось и в Интернет.
С помощью этого пера вы можете воспроизвести эффект ряби в своей работе, используя только код CSS.
Этот фрагмент предназначен для значков, которые также загораются при выборе, поэтому он больше похож на табуляцию / выбор элементов страницы. Но эффекты можно перенести на все, что упрощает клонирование.
Кнопка маны
Вот один из самых уникальных эффектов кнопок, которые я когда-либо видел, с использованием SVG для форм и CSS для анимации.
Кодер
Дин Хидри создал этот эффект кнопки маны, используя всего 80 строк CSS и пару десятков строк HTML (включая SVG). При наведении курсора эта кнопка анимирует пользовательскую жидкую форму внутри кнопки для создания фоновой заливки, а затем анимирует ее наружу.
Если у вас есть сайт, на котором можно использовать этот стиль кнопок, определенно стоит поиграться с ним.
Iconic Button FX
Вы можете многое сделать с иконочными шрифтами, и эти анимированные кнопки Дэвида Дарнса являются отличным примером.
Иконки анимируются по-разному при наведении курсора, каждый со своим собственным эффектом подписи. Вы не можете использовать все эти значки на одном веб-сайте, но пользовательские стили анимации легко клонировать. Они работают исключительно на CSS3 и подходят для любого шрифта значков, который вы выберете. Действительно забавный эффект для клонирования практически для любого веб-сайта!
И это завершает мой список эффектов UX, но это, конечно, не окончательный сборник.
Если вы прочесываете Интернет, вы можете найти множество других эффектов наведения курсора на кнопки / значки, и у многих из них есть бесплатный исходный код.Но если вы хотите узнать больше о пользовательской веб-анимации, ознакомьтесь с нашим огромным списком плагинов и ресурсов для разработчиков.
Селектор щелчка по элементу | Документация по веб-парсеру
Селектор щелчка по элементу
работает аналогично Селектор элемента. Его основная цель также является элементом выбор, который может быть передан в качестве родительских элементов его дочерним селекторам. Единственный Разница в том, что Селектор кликов по элементу может взаимодействовать с веб-страницей, нажатие на кнопки для загрузки новых элементов.Например, страница может использовать JavaScript и AJAX для разбивки на страницы или загрузки элементов.
Примечание! при выборе интерактивных элементов их следует выбирать, перемещая наведите указатель мыши на элемент и нажмите «S». Такой выбор позволит избежать события, запускаемые кнопкой.
Варианты конфигурации
selector — CSS-селектор для элементов оболочки, которые будут использоваться как родительские элементы для дочерних селекторов.
селектор кликов — селектор CSS для кнопок, которые необходимо нажмите, чтобы загрузить больше элементов.
тип клика — тип того, как селектор узнает, когда не будет новых элементы и щелчки должны прекратиться.
уникальность элемента клика — тип того, как селектор узнает, какие кнопки уже нажал.
multiple — извлекается несколько записей (почти всегда должно быть проверил). Множественный вариант для дочерних селекторов обычно не следует проверять.
delay — задержка перед выбором элемента и задержка между нажатиями. Этот обычно следует указывать, потому что данные не будут загружены сразу из сервер.Более 2000 мс может быть хорошим выбором, если вы не хотите потерять данные, потому что сервер не ответил достаточно быстро.
Отбросить начальные элементы — селектор не вернет элементы, которые были доступны до первого нажатия. Это может быть полезно для дублирование удаления.
Тип щелчка
Нажмите один раз
Тип Click Once нажимает кнопки только один раз. Если появится новая кнопка который можно выбрать, он также будет нажат.Например, ссылки на страницы может отображать страницы с 1 по 5, но страницы с 6 по 10 появятся через некоторое время. В селектор также будет нажимать на эти кнопки.
Нажмите еще
Тип
Click More заставляет селектор нажимать на заданные кнопки несколько раз пока не перестанут появляться новые элементы. Новый элемент считается элемент с уникальным текстовым содержимым.
Уникальность элемента клика
При использовании Нажмите один раз будут нажиматься только уникальные кнопки.Когда используешь Нажмите «Подробнее» это помогает игнорировать кнопки, которые не создают дополнительных элементов.
Сценарии использования
Перемещение по страницам с помощью типа селектора «Щелкнуть один раз»
Например, есть сайт, на котором отображается список товаров, и некоторые кнопки разбивки на страницы, которые динамически перезагружают эти элементы (после нажатия кнопки URL-адрес не меняется. изменения после хэш-тега # не учитываются). Использование элемента Нажмите селектор , вы можете выбрать эти элементы и кнопки, по которым нужно щелкнуть.Скребок во время фазы очистки будет нажимать эти кнопки, чтобы извлечь все элементы. Также вам необходимо добавить дочерние селекторы для селектора кликов Element которые выбирают данные в каждом элементе. На рисунке 1 вы можете увидеть, как настроить Селектор Element щелкните селектор для извлечения данных с описанного сайта.
Загрузите больше товаров на сайт электронной коммерции, нажав кнопку «Еще»
Этот пример аналогичен приведенному выше. Единственная разница в том, что в этом элементы сайта загружаются многократным нажатием одной кнопки.В этом случае селектор Element click selector должен быть настроен на использование щелчка «Click more» тип. На рисунке 2 вы можете увидеть, как настроить селектор кликов Element . для извлечения данных с этого сайта.
Когда выбирать
Отменить при наличии элемента щелчка вариант
Параметр Отменить при наличии элемента щелчка выбирается, когда, например, страницы продуктов веб-сайта электронной коммерции, которые подвергаются соскабливанию, имеют почти идентичную структуру, с единственным отличительным признаком наличия Вариант вариации (размер, цвет, количество и т. д.), который необходимо повторить на странице продукта.
Из-за того, что парсер будет собирать данные до и после щелчка, если этот параметр не выбран парсинг страницы с несколькими доступными вариантами, парсер извлечет информацию перед инициированием клика и во время процесса щелчка, что приводит к дублированию или непригодной для использования строке данных.
Похожие видео
Bulma.io CSS Button Basics. Есть несколько способов стилизовать Bulma… | Райан Картер | Overthink Development
Bulma.io Buttons
Есть несколько способов стилизовать кнопки Bulma в CSS. Официальная документация показывает только тег ссылки как способ использования кнопки, но на самом деле это немного недальновидно. Вы можете использовать множество различных элементов для стилизации кнопки, для этого просто нужно, чтобы на ней была кнопка класса.
Ссылка «Кнопка» Код:

Click Me!

Теперь эта «кнопка» на самом деле не является кнопкой и не будет делать ничего, если у вас нет ссылки, определенной путем добавления атрибута href в , или обработчика событий, который запускает функция javascript для выполнения каких-либо действий при нажатии на ссылку.
Ссылка «Кнопка» Код с определенным атрибутом href (на самом деле это обычная ссылка):

Щелкните меня, и я начну

Ссылка «Кнопка» Код с обработчиком событий и функцией JavaScript для максимального удобства:
или
Щелкни по мне, и я начну рисовать на JS!

Примечание. Если вам интересно, почему они оба работают, причина в том, что вы должны либо указать html-коду, что это javascript с частью javascript :, потому что имя функции не имеет () в конце (невозможно сказать, если вы этого не сделаете), или вы должны включить () и можете пропустить часть javascript :.
Но вы должны что-то делать в функции javascript в любом случае, иначе она ничего не сделает:
Код JavaScript
function linkStuffDoer () {
// это отправит вас по указанному адресу:
window.location.href = 'https://www.google.com';
}
Этот вариант очень похож на своего брата по ссылке, но у него нет атрибута href, поскольку он изначально не предназначался для использования в качестве ссылки или кнопки. Супер-ботаники-пуристы-программисты и гуру внешнего интерфейса, вероятно, скажут вам, что это не «семантически правильный» способ использования div, потому что DIV — это DIVISION, но меня это не волнует.Это очень полезно, и я делаю это все время (здесь 20+ лет профессионалов, так что идите отсосать яичным ботаникам).

Щелкни по мне, и я сделаю JS, как мой брат по ссылке!

Это странная часть Bulma.io, по какой-то причине тег
Вы можете превратить в кнопки все, что угодно, если хотите. Просто они не так часто используются, потому что другие, о которых мы упоминали, намного лучше и более распространены. Кнопка — это просто вещь, которая что-то делает. Любой элемент, который разрешает обработчик событий javascript, может быть функциональной кнопкой. Это классная особенность классов CSS и тот факт, что Bulma CSS их использует.Класс будет применять свою синтаксическую сладкую липкость ко всему, к чему вы добавляете класс, эй. Мне нужно уколоть немного инсулина после всей этой сладости, извините.

Я спина, щелкни меня, если посмеешь!

Я позиционирую, я слишком хорош для этого клика

Если вы хотите получить больше руководств по Bulma, дайте мне знать. Спасибо за чтение!
Проектирование состояний для кнопок и взаимодействий пользовательского интерфейса
Иллюстрация Тридиба Даса
Прошли те времена, когда веб-сайты представляли собой набор изображений и статических ресурсов.Сегодня веб и мобильные приложения стали намного более интерактивными, чем когда-либо прежде, и мы, дизайнеры, должны учитывать это.
Понимание того, как проектировать эти микровзаимодействия с элементами пользовательского интерфейса, может помочь вам повысить ценность вашего продукта и улучшить взаимодействие с конечным пользователем. В этом руководстве мы узнаем, как использовать состояния кнопок для создания интерактивных элементов в вашем дизайне.
Что такое государства?
Прежде чем мы сможем рассмотреть, как проектировать состояния, мы должны определить, что они собой представляют.Состояния относятся к различным формам, которые элемент может принимать в зависимости от контекста, в котором он используется. Возьмем, например, нерегулируемый выключатель света; переключатель имеет два состояния: включено и выключено, и в каждом из них он выглядит по-разному. То же самое относится к чему-то вроде тумблера в пользовательском интерфейсе, где состояние «включено» может быть представлено зеленой заливкой, а выключенное — серым.
Состояния не ограничиваются только статическими «переключаемыми» состояниями, и в сегодняшнем мире мощных языков интерфейса они интерактивны и развиваются.
Типы состояний кнопок в интерфейсах
Чтобы понять, какие типы состояний используются в дизайне интерфейса, давайте сосредоточимся на кнопках — очень распространенном элементе, который используется для интерактивности в дизайне пользовательского интерфейса. Кнопки могут иметь несколько состояний, поскольку они являются одними из наиболее часто используемых элементов пользовательского интерфейса. Следующие состояния являются общими состояниями кнопок CSS, используемыми в веб-разработке.
По умолчанию : как выглядит кнопка, когда с ней не взаимодействуют, но с ней можно взаимодействовать.Это также можно назвать «Нормальным» состоянием.
Hover : состояние наведения зависит от веб-дизайна, поскольку мобильные устройства обычно не поддерживают взаимодействие при наведении курсора. Это состояние, в котором будет находиться кнопка при наведении курсора мыши на кнопку на экране. Это полезное состояние, указывающее на то, что с чем-то можно взаимодействовать при перемещении курсора по экрану.
Фокус : состояние фокуса важно для доступности.Хотя сегодня многие стили не привлекают внимание к этому состоянию, его присутствие имеет решающее значение для выделения кнопок, поскольку кто-то использует вкладку для навигации по веб-сайту. Часто вы видите это состояние как голубой контур вокруг кнопки или объекта, на который можно нажать, но это зависит от настроек браузера по умолчанию.
Активный : активное состояние также часто используется недостаточно. Активное состояние может использоваться для «щелчка» или нажатия кнопки, и часто может напоминать вид «нажатой» кнопки.
Отключено : это состояние означает, что кнопка недоступна для взаимодействия. Это используется, если процесс загружается как способ блокировки действия или в ситуациях, когда действие привязано к расширенной функции, которая требует обновления перед использованием. В обоих случаях к нему должна быть добавлена всплывающая подсказка, объясняющая, почему действие недоступно.
Загрузка / обработка : состояние загрузки используется, когда действие было выполнено, и система «работает» над его обработкой.Например, если страница сохраняется или загружается файл, часто кнопка переходит в состояние загрузки, в котором изменяется текст, и появляется индикатор выполнения. Это часто может быть связано с отключенным состоянием, чтобы предотвратить дублирование действий.
Типы состояний могут различаться в зависимости от элементов, которые вы проектируете. Например, поле ввода также будет иметь состояния в фокусе, наведения и отключение, но также может включать состояния для пустых полей, состояния ошибок и другие.
Разработка состояний кнопок
При разработке состояний для кнопок и других элементов пользовательского интерфейса важно помнить о цели, которую выполняет это состояние, чтобы вы могли проектировать соответствующим образом.Начните с состояния кнопки по умолчанию, вероятно, это та версия, которую вы обозначили в своих проектах. Если вы еще не создали кнопку, это руководство поможет вам быстрее освоить кнопки в вашем дизайне.
Для начала может быть полезно отобразить все состояния кнопок рядом на монтажной области, чтобы вы могли видеть, как они соотносятся друг с другом. Вы также захотите сделать это для других типов кнопок (основных, дополнительных и т. Д.).
Отсюда вы можете начать стилизовать свои состояния, помня об условных обозначениях и общих шаблонах для каждого общего состояния, это будет варьироваться в зависимости от стиля вашего сайта.
Состояние наведения
Состояние наведения должно быть спроектировано так, чтобы указывать, что состояние кнопки можно щелкнуть. Общие стили состояния наведения — затемнение / осветление цвета заливки фона или изменение высоты или положения кнопки.
Состояние фокусировки
Состояние фокусировки кнопки традиционно следует стандартному шаблону контура вокруг кнопки. Поскольку это состояние сосредоточено на доступности, может быть полезно следовать соглашению, чтобы облегчить понимание.Большинство современных браузеров имеют состояние фокуса по умолчанию, и по возможности его следует оставить без изменений. В Chrome это синий контур, который выглядит примерно так.
Активное состояние
Активное состояние часто используется недостаточно, но служит полезным целям в дизайне пользовательского интерфейса в «плоском» стиле. При наличии множества устройств ввода, мышей и трекпадов не всегда ясно, когда вы совершили действие «щелкнуть». Используя активное состояние, вы можете создавать тонкие визуальные подсказки того, что кнопка была нажата.
Попробуйте добавить более темную границу и немного затемните фоновую заливку, чтобы создать эффект нажатия кнопки на странице.Вы также можете использовать масштабирование, чтобы немного уменьшить размер кнопки, чтобы усилить эффект.
Отключенное состояние
Отключенное состояние кнопки должно указывать на то, что действие в данный момент недоступно. Следовательно, вы не хотите, чтобы отключенное состояние выглядело активным. Распространенный метод — уменьшить непрозрачность, чтобы кнопка выглядела менее заметной. Вы не хотите изменять цвета и стиль кнопки, так как вы рискуете принять ее за другой тип кнопки. Но уменьшив непрозрачность, вы можете уменьшить заметность кнопки.Также удаление любых теней или возвышений поможет передать сообщение.
Состояние загрузки
Обычным подходом к кнопке загрузки или обработки является введение значка, часто анимированного, в унисон с меткой кнопки. Использование счетчика или значка загрузки, который вращается во время обработки, будет указывать на то, что действие выполняется.
О чем следует помнить
При работе с дизайном кнопок и проектированием состояний для этих интерактивных элементов пользовательского интерфейса важно помнить несколько вещей.
Следуйте общепринятым соглашениям — Кнопки — это очень интерактивный и общий элемент пользовательского интерфейса. У пользователей есть ожидания относительно того, как они себя ведут и функционируют. Не изобретайте велосипед слишком часто, чтобы не запутаться.
Сохраняйте соответствие своему стилю — Резкое отклонение от стиля вашего веб-сайта, продукта или бренда может сделать состояние ваших кнопок чуждым создаваемому вами опыту. Держите состояния в рамках ограничений вашего бренда.
Проверяйте свои состояния — Не забывайте о важности тестирования даже для такой, казалось бы, такой мелочи, как состояния кнопок. Понимание того, как люди реагируют и взаимодействуют с вашими состояниями, может сильно повлиять на то, как они воспринимают ваш продукт.
Избегайте сложных анимаций — Простые анимации и переходы могут повысить ценность ваших состояний, давая понять, что вы перемещаетесь между состояниями. Однако использование сложных анимаций CSS, вращений и причудливых эффектов может отвлекать от цели действия.
Как и в случае с кнопками, состояния могут применяться ко многим элементам вашего пользовательского интерфейса, чтобы сделать его динамичным, обеспечить ценную обратную связь с пользователем в приложении и направить аудиторию к пунктам назначения и действиям, которые вы намереваетесь для них предпринять.
No related posts.