Button active css не работает

Как через CSS заставить кнопку реагировать на нажатие

В CSS есть определенное состояние ссылки, которое я не использую очень часто. По крайней мере, я не использовал его часто до этого, но сейчас я понимаю, что оно может пригодиться. Я говорю о состоянии ссылки «active».

Это состояние начинает работать, когда Вы нажимаете на ссылку. То есть, после нажатия оно активируется. Мы все пользуемся состояниями «hover» или «visited», а состояние «active» может быть полезным, когда мы имеем дело со стилизоваными кнопками.

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

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

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

Хватит болтать, давайте приступим к делу.

Допустим у нас есть кнопка, которая использует рисунок. Разметка будет выглядить так:

Добавим стилей. Наш CSS будет выглядеть так:

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

Теперь нам необходимо прописать состояние «active»:

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

Здесь находится картинка, о которой я говорю. А вот здесь демо (в Internet Explorer работать не будет — тут находится возможное решение проблемы).

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.usabilitypost.com
Перевел: Максим Шкурупий
Урок создан: 25 Марта 2009
Просмотров: 114391
Правила перепечатки

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

и т.д)

Элементы с атрибутом tabindex

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

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

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

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

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

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

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

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

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

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

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

1. Удержание пробела вызывает состояние :active у кнопок ( ), но при удержании Enter этого не происходит
2. Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще

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

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

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

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

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

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

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

Для кнопок:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Кроссбраузерные проблемы псевдокласса :active

С появлением множества нововведений в технологиях вёрстки веб страниц, у разработчиков появилась возможность отчасти заменить JavaScript, применяя HTML/CSS для большей производительности и расширяемости интерфейса своих порталов.
Помимо проблем с кроссбраузерностью и разной реализаций новых свойств CSS, часто приходится встречаться с другими проблемами в местах, где казалось бы, давно всё устаканилось и везде работает одинаково. Именно с такой проблемой мне пришлось столкнутся, применяя CSS transitions вместе с псевдоклассом :active. Видимо из-за того, что в документации отсутствует описание поведения родителей элемента в состоянии :active, в разных браузерных движках это поведение реализовано по-разному.

Задача

Прототип

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

В сферическом вакууме

В спецификации указано, что активным элементом (прим. div:active), является тот, на который производится клик, но ничего не сказано как наследуется активное состояние. Делаем эксперимент, и смотрим, как же в реальном мире, ведут себя активные элементы, ссылка на страницу с экспериментом на Jsfiddle (на dabblet).

Первые проблемы

В первом случае, в webkit, FF 3.6+ и opera мы видим, что активное состояние наследуется всеми родителями, вплоть до , но когда требуется отследить более 1ого активного элемента, опера уже не справляется, и активное состояние наследует только первый родитель в DOM, декорированный псевдоклассом :active (span:active)

В Interner Explorer активное состояние вообще не наследуется, и работает только при клике на элемент декорированный :active псевдокласом (в эксперименте это ), а в версиях до 7ого, включительно, :active работает только на ссылки.

Это еще не всё

Во втором случае я использовал каскад от активного элемента (span:active b), как видим в примере, webkit и ff, всё работает как и предполагалось, кликая на любой элемент вниз по DOM от декорированного псевдоклассом стиля, подсвечивается нужный элемент, определённый через каскад. Опера в этом случае начинает вести себя как IE, переставая наследовать активное состояние и работая только с элементом, на которые непосредственно происходит клик.

Оружие к бою

В третьем примере удалось заставить оперу наследовать активное состояние от потомка для использования в каскаде, используя абсолютно позиционированный элемент ( ), опирающийся от элемента декорированного псевдоклассом :active. FF и webkit тут по прежнему работают предсказуемо, но IE8+ до сих пор не при делах.

Что бы заставить работать IE как нам требуется, и улучшить немного код, заменяем абсолютный элемент псевдоэлементом. Как выяснилось, в IE активное состояние всё таки наследуется, но только на псевдоэлементы ::before, ::after. К сожалению, в IE8 псевдоэлементы игнорируют z-index, что может не подойти в большинстве случаев (как и в моём), но в IE9+ всё в порядке.

Миссия закончена, возвращаемся домой

В итоге, мы заставили все элементы одинакого наследовать активное состояние кроссбраузерно (IE9+, FF 3.6+, Opera 9.64+, Chrome, Safari и другие вебкиты) и теперь спокойно можем реализовать функционал на портале.
Так как функционал несёт чисто декоративную роль, мы решил отказаться от IE6-8, оставив им мягкий fallback, а остальное сделать на CSS.

Постскриптум.

Без каскада

Можно проще решить проблему в IE8 и Опере, отказавшись от каскада, что в моём случае не подходило, и снижало расширяемость функционала, поэтому решил отказаться от реализуемой красивости в IE8.

Пояснение к задаче

Единственный нормальный способ отслеживать клик на CSS, в моём примере, без использования Java Script, оказался псевдокласс :active. Можно было использовать :focus, подставляя элементы формы под существующие блоки, но такое решение много тяжелее по нагрузке, и в итоге всё равно требовало Java Script напильника.

Источник