Как сделать чтобы кнопка меняла цвет

Кнопка, изменяющая свой цвет
при наведении на нее курсора

Примеры переливающихся и меняющих свой цвет текстов мы уже рассматривали ранее. Теперь на очереди стоят кнопки (input type=»button»). Рассмотрим JavaScript код, позволяющий изменять цвет кнопки при наведении на нее курсора мышки.

Собственно вот так выглядит пример работы рассматриваемого скрипта:

Для получения таких кнопок, изменяющих свой цвет текста при наведении курсора мышки, поместите следующий скрипт в начало Вашей странички:

JavaScript код:

< script type = "text/javascript" >
function color_button ( x ) if ( «INPUT» == event . srcElement . tagName ) event . srcElement . className = x ;
>

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

< form name = "primer" align = "center" onmouseover = "color_button('start')"
onmouseout = «color_button(»)» >
Наведите курсор мыши на одну из кнопок !< br >
< input type = "button" value = "Кнопка № 1" >
< input type = "button" value = "Кнопка № 2" >
< input type = "button" value = "Кнопка № 3" >

Еще не забудьте вставить в заголовок странички (между тегами и ) стиль, который будет применен к нашим кнопкам при наведении на них курсора мышки:

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

Изменение цвета кнопки при нажатии?

Есть страница с двумя таблицами кнопок. Мне нужно чтоб при нажатии кнопки с классом «default», менялся цвет кнопок без класса на зеленый, а при следующем нажатии на кнопку с классом «default», цвет кнопок без класса менялся с зеленого на красный(например нажимаю я в верхней стеке кнопок на единицу, и цвет кнопки с единицей в нижней стеке кнопок менялся на зеленый, а потом после нажатие с зеленого на красный поменялся).

     button.default < background: white; width: 80px; height: 80px; font-size: 40pt; transition: background 9999999s; >button.default:active  
 
 1
 
 2
 
 3
 
 4
 
 5
 
 6
 
 7
 
 8
 
 9
 
10
 
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20
 
 
21
 
22
 
23
 
24
 
25
 
26
 
27
 
28
 
29
 
30
 
 
31
 
32
 
33
 
34
 
35
 
36
 
37
 
38
 
39
 
40
 
 
41
 
42
 
43
 
44
 
45
 
46
 
47
 
48
 
49
 
50
 
 
 
 
 1
 
 2
 
 3
 
 4
 
 5
 
 6
 
 7
 
 8
 
 9
 
10
 
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20
 
 
21
 
22
 
23
 
24
 
25
 
26
 
27
 
28
 
29
 
30
 
 
31
 
32
 
33
 
34
 
35
 
36
 
37
 
38
 
39
 
40
 
 
41
 
42
 
43
 
44
 
45
 
46
 
47
 
48
 
49
 
50
 
 
  

• Вопрос задан более трёх лет назад
• 4569 просмотров

Курсы javascript

Добрый день!
Извините за беспокойство, может кто-нибудь поможет, только начал изучение javascript.
Задача: чтобы из выпадающего списка выбирался цвет, потом нажималась кнопка и чёрный квадрат становился красным или зелёным (в зависимости от выбранного цвета).

Написал такой код, но не работает(((

   #pict  Красный Зеленый  Кнопка function ifelsefunction() < var seltheme = document.getElementById("selcolor").value; var elem = document.getElementById("pict"); if(seltheme == "Maroon") < elem.style.backgroundColor = 'red'; >else if(seltheme == "Green")  

CSS. Измененить цвет при нажатии и сохранить изменённое значение

Как сделать так, чтобы при клике изменялся цвет элемента и не изменялся на дефолт при клике на другое место. Попробовала добавить код от Vadizar. Получается вот так: Но когда я добавляю нижнее, так как мне не нужно изменение фона. Я с фоном не работаю :

button < color: #ff9000 !important; transition: color 9999999s >button:active

у меня «палец вверх» не становится зелёным. Почему ? И ещё: Почему подсветка кода от Vadizar такая: слово background выделяется зелёным А при моём (скорей всего неправильном) варианте такая: слово color не выделяется зелёным И почему в конец после transition не добавляется ; ?