Html css нажатая кнопка

20 CSS Button Click Effects

Collection of hand-picked free HTML and CSS button click effect code examples from codepen and other resources. Update of February 2019 collection. 6 new items.

Related Articles

Author

Links

Made with

About a code

Subtle Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Button Click Pulsing Effect

Pure CSS button style. Pulsing effect on click with no JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Copy Button Click Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Material UI Stretch Button

Delightful Material UI stretch button built by clipping paths.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

SCSS Beveled Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Ripple Button with Few JavaScript

Just a simple retro’ish ripple button with few Javascript codes for smoother animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS-only Ripple Effect Button

A CSS-only toggle button with dynamic inverse text colour. The animated radial-gradient is achieved by scaling a pseudo element that sits in front of the text. The dynamic text colour uses mix-blend-mode: difference .

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Sweet Little Button Mixin

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Black Biometirics Login Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Delete Button with Micro-Interactions

Playing with micro-interactions, adding some micro-interactions on a delete button/trash icon.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Add To Collection Button

Simple animation if you add smth to a collection for example.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Bubbly Button with Click Animation

Made the bubbles using radial-gradient for background-image . This property is so cool that you can draw many things without adding extra div s or pseudo elements ( ::before and ::after )

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник

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

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

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

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

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

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

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

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

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

#button display: block; 
width: 135px; 
height: 43px; 
background: url(button.png) no-repeat top; 
>

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

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

#button:active background: url(button.png) no-repeat bottom; 
>

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

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

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

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

• 

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

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

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

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

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

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

Источник

Обработка события click средствами CSS

В течении нескольких последних лет наблюдается удивительная экспансия языков клиентской части веб приложений, особенно HTML5 и CSS3.

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

Но всегда не хватало возможности обрабатывать событие click средствами CSS. Некоторые специалисты полагают, что такой опции не должно быть, так как интерактивное взаимодействие с пользователем является полем действия для JavaScript. Их доводы разумны, но использование JavaScript даже для простых нажатий утомительно.

В настоящее время нет официальных средств CSS для обработки события click. Но тем не менее, существуют способы, которые можно использовать для «обнаружения» нажатия с помощью только CSS без JavaScript.

Примечание

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

Используем чекбокс

Наверняка вы уже встречались с данным методом. Это самый популярный метод для обработки события click средствами CSS.

Метод основан на использовании чекбокса. Данный элемент имеет бинарную сущность и может быть только в одном из двух состояний. Поэтому данный метод является вполне надежным способом для обработки событий click в CSS.

 
Здесь будет красный цвет. Или уже есть.
 

.to-be-changed < color: black; >input[type=checkbox]:checked ~ .to-be-changed

Метод основан на использовании псевдо-класса :checked и селектора ~ . Обратите внимание, что он будет работать и с селектором + . Сущность метод заключается в том, что “если чекбокс отмечен, то следующие элементы с классом .to-be-changed будет красным”.

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

 Нажми меня! 
Здесь будет красный цвет. Или уже есть.
 

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

input[type=checkbox] < position: absolute; top: -9999px; left: -9999px; >label < display: block; background: #08C; padding: 5px; border: 1px solid rgba(0,0,0,.1); border-radius: 2px; color: white; font-weight: bold; >input[type=checkbox]:checked ~ .to-be-changed

У нас получилась кнопка, нажатие на которую меняет цвет текста в параграфе. Повторное нажатие на кнопку меняет цвет обратно.

(Обратите внимание, что существуют различные методы для скрытия чекбокса. Очевидный — применение display:none .)

Плюсы

• Бинарный, есть только два состояния — отмечен или не отмечен
• Повторное нажатие приводит к восстановлению состояния (данный пункт может оказаться минусом)
• Позволяет организовать обработку связанных событий click (если первый чекбокс отмечен и второй чекбокс отмечен, то выполняем следующее действие)

Минусы

• Элементы должны иметь общего предка
• Требуется дополнительная разметка HTML (input, label и так далее)
• Требуется дополнительные действия для работы на мобильных браузерах

Способ с :target

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

Специальное событие для псевдо-класса :target зависит от “идентификатора фрагмента”. Если говорить просто, то данный псевдо-класс ссылается на хэштег, который располагается в конце URL, и становится активным, когда хэштег и ID совпадают.

Нажми меня! 
Здесь будет красный цвет. Или уже есть.
 

.to-be-changed < color: black; >.to-be-changed:target

При нажатии на ссылку ( href=»#id» ) изменяется URL и осуществляется переход по метке #id на странице. В данный момент элемент с идентификатором id может быть выделен с помощью псевдо-класса :target.

Плюсы

Минусы

• Мусор в истории браузера
• Происходит прокручивание страницы
• Требуется тег ссылки или операции с URL для включения хэштега
• Можно воздействовать только на один элемент (так как ID является уникальным)
• Нет способов возврата к исходному состоянию без использования другого хэштега, ссылки или операций с URL

Способ с :focus

Продолжим наш обзор способом с использованием другого псевдо-класса — :focus. Идея почти такая же, как и в предыдущем случае, за исключением того, что не предполагается изменения URL. Здесь мы полагаемся на фокус ввода на определенном элементе.

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

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

Нажми меня! 
Здесь будет красный цвет. Или уже есть.
 

Когда происходит нажатие на элементе спан, или переключение на него с помощью клавиши табуляции, он получает фокус ввода и соответствует псевдо-классу :focus. Селектор соседей делает остальную работу. Если по каким-то причинам использовать атрибут tabindex не требуется, то можно просто установить ссылку с адресом #.

Плюсы

Минусы

• Требуется либо элемент с фокусом, либо атрибут tabindex
• Соответствие возникает только при наличии фокуса ввода (нажатие где-нибудь в другом месте страницы смешивает алгоритм работы)

Способ с переходами

Вероятно, данный метод является самым «грязным» способом обработки события click в CSS.

Идея заключается в «хранении» стиля CSS в переходе CSS. Используем псевдо-бесконечную задержку, чтобы предотвратить возврат в исходное состояние. Звучит сложно, но в действительности очень просто в реализации.

Нажми меня! 
Здесь будет красный цвет. Или уже есть.
 

.to-be-changed < transition: all 0s 9999999s; >span:active ~ .to-be-changed

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

Плюсы

Минусы

• Плохая поддержка в браузерах (нет в IE9 и Opera Mini)
• Работает только со значениями, которые можно использовать с переходами
• Нет способов возврата к исходному состоянию
• Нет реальной бесконечности ожидания (если ваш проект предполагает ожидание более 116 дней)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tympanus.net/codrops/2012/12/17/css-click-events/
Перевел: Сергей Фастунов
Урок создан: 18 Декабря 2012
Просмотров: 132686
Правила перепечатки

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

• 

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

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

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

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

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

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

Источник