Подсветка при клике css

Подсвечивающиеся кнопки при наведении на них курсора мышки

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

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

Чтобы получить на своем сайте подобные светящиеся кнопки (button), Вам необходимо скопировать следующий стиль оформления кнопок на Вашу страничку:

< style type = "text/css" >
. button padding : 3px 15px ;
margin : 15px ;
cursor : pointer ;
border : 0px ;
background — color : #339900;
font — size : 18px ;
color : #000000;
box — shadow : 0 0 5px #FF00FF;
— moz — box — shadow : 0 0 5px #FF00FF;
— ms — box — shadow : 0 0 5px #FF00FF;
— o — box — shadow : 0 0 5px #FF00FF;
— webkit — box — shadow : 0 0 5px #FF00FF;
>
. button : hover box — shadow : 0 0 12px #6633FF;
— moz — box — shadow : 0 0 12px #6633FF;
— o — box — shadow : 0 0 12px #6633FF;
— ms — box — shadow : 0 0 12px #6633FF;
— webkit — box — shadow : 0 0 12px #6633FF;
>

Кнопки, к которым следует применить эффект свечения, следует оформлять следующим образом:

Таким образом, кнопки на Вашем сайте станут более живыми и яркими по сравнению со стандартными кнопками.

Источник

How to Change Button Color on Click in CSS

Button is a clickable element used to perform a specific action. Using CSS, you can set different styles of buttons one of them is to change the color of a button on click. The color of a button can be set using the CSS “:active” pseudo-class.

This blog will teach you the procedure related to changing the button color on click. For this, firstly, learn about the :active pseudo-class.

What is “:active” in CSS?

Changing button color on click in CSS is possible with the help of the “:active” pseudo-class. In HTML, it indicates an element that is being activated when the user clicks on it. Moreover, when using a mouse, the activation starts when the mouse key is pressed.

“a” refers to the HTML element on which the :active class will be applied.

Let’s head towards an example to understand the stated concept.

How to Change Button Color on Click in CSS?

To change the color of a button on click, first, create a button in an HTML file and assign the class name “btn”.

HTML

Next, in CSS, set the color of the button. To do so, we will use “.btn” to access the button and set the color of the button as “rgb(0, 255, 213)”.

CSS

background-color : rgb ( 0 , 255 , 213 ) ;

After that, apply :active pseudo-class on the button as “.btn:active” and set the color of the button that will show in its active state as “rgb(123, 180, 17)”:

background-color : rgb ( 123 , 180 , 17 ) ;

This will show the following outcome:

Now, let’s add the heading with tag and button class name “button”, inside the tag.

HTML

Next, we will move to CSS and style the button and apply :active on it. To do so, we will set the border style as “none” and give padding as “15px”. After that, set the color of the button text as “rgb(50, 0, 54)” and its background as “rgb(177, 110, 149)”, and its radius as “15px”:

background-color : rgb ( 177 , 110 , 149 ) ;

This will show the following outcome:

After that, we will apply :active pseudo-class on the button as “.button:active” and set the color of a button as “rgb(200, 255, 0)”:

background-color : rgb ( 200 , 255 , 0 ) ;

Once you implement all of the above code, go to the HTML file and execute it to check out the result:

From the output, it can be observed when the button is clicked its color is changed according to the specified RGB color code.

Conclusion

To change the button color on click in CSS, the “:active” pseudo-class can be used. More specifically, it can represent the button element when it gets activated. Using this class, you can set different button colors when the mouse clicks on it. This article explained the procedure for changing button color on click in CSS.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

Смена цвета CSS при клике по элементу

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

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

Смена цвета шрифта ячейки DbGrid при клике на неё
Ребята, как сделать так, чтобы при клике на ячейку DBGrid, цвет её шрифта менялся?

Смена цвета CSS по результатам JS
Есть таблица (стандартная tr td) в html, есть массив в JS который ее заполняет. Я проверяю.

1 2 3 4 5 6 7 8 9 10 11 12 13

div{ width: 100px; height: 100px; margin:5px auto; background:lightblue; } #swcolor{ display:none; } #swcolor:checked ~ .block2{ background:red; } }

input id="swcolor" type="checkbox"/> label for="swcolor"> div class="block1">/div> /label> div class="block2">/div>

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

button < background-color: #dedede; >button:hover < background-color: #aaa; >button:focus

Стилизация активного состояния (: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). Я написал про это странное поведение здесь.

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

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

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

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

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

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

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

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

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 по отдельности.

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

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

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

Источник