Смена цвета кнопки при нажатии css

Блог

Как заставить кнопки менять цвет при нажатии (html, CSS, JavaScript)

#javascript #html #css #button #colors

#javascript #HTML #css #кнопка #Цвет

Вопрос:

Я настроил 3 кнопки и задаюсь вопросом, как заставить их менять цвета при нажатии. «Да» должно быть зеленым, «Нет» должно быть красным, «Возможно» также должно быть красным.

 html> html lang="en"> head> link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500amp;display=swap" rel="stylesheet"> link href="styles.css" rel="stylesheet"> title>Trivia! title> script> script> head> body> div class="jumbotron"> h1>Trivia! h1> div> div class="container"> div class="section"> h2>Part 1: Multiple Choice h2> hr> h3>Do you love me? h3> button id="q1button">Yes button> button id="q2button">No button> button id="q3button">Maybe button> div> div> body> html> 

Комментарии:

1. Это Java или Javascript? Это два совершенно разных языка.

2. Я имел в виду Javascript

3. К вашему сведению, ваш тег не закрыт.

Ответ №1:

Вы можете сделать это с помощью javascript. Я думаю, что что-то подобное работает для вас.

 html> html> body> div class="jumbotron"> h1>Trivia! h1> div> div class="container"> div class="section"> h2>Part 1: Multiple Choice h2> hr> h3>Do you love me?h3> button id="q1button" onclick="this.style.background = 'green'">Yes button> button id="q2button" onclick="this.style.background = 'red'">No button> button id="q3button" onclick="this.style.background = 'red'">Maybe button> div> div> body> html> 

Редактировать:

Обойдите их, чтобы все они были выделены.

 html> html> body> div class="jumbotron"> h1>Trivia! h1> div> div class="container"> div class="section"> h2>Part 1: Multiple Choice h2> hr> h3>Do you love me?h3> button id="q1button" onclick="changeBg(this);">Yes button> button id="q2button" onclick="changeBg(this);">No button> button id="q3button" onclick="changeBg(this);">Maybe button> div> div> script> function changeBg(button)< if(button.id == "q1button")< button.style.background = "green"; document.getElementById("q2button").style.background = "transparent"; document.getElementById("q3button").style.background = "transparent"; > else if(button.id == "q2button")< button.style.background = "red"; document.getElementById("q1button").style.background = "transparent"; document.getElementById("q3button").style.background = "transparent"; > if(button.id == "q3button")< button.style.background = "red"; document.getElementById("q1button").style.background = "transparent"; document.getElementById("q2button").style.background = "transparent"; > > script> body> html> 

Комментарии:

1. Проблема здесь в том, что если вы нажмете более одного, все они будут выделены.

2. Как мне обойти их выделение?

Ответ №2:

 style> .yes:focus < background-color: green; > .no:focus < background-color: red; > .maybe:focus < background-color: yellow; > style> button class="yes">Yes button> button class="no">No button> button class="maybe">Maybe button> 

Дайте мне знать, если это сработает.

Комментарии:

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

2. @bobsfriend Верно

Ответ №3:

 button:focus < outline: none; border: 1px solid black; > #q1button:focus < background-color: green; color: pink; > #q2button:focus < background-color: red; color: white; > #q3button:focus < background-color: yellow; color: black; > 

 body> div class="jumbotron"> h1>Trivia! h1> div> div class="container"> div class="section"> h2>Part 1: Multiple Choice h2> hr> h3>Do you love me?h3> button id="q1button">Yes button> button id="q2button">No button> button id="q3button">Maybe button> div> div> body> 

Комментарии:

1. Обратите внимание, что OP хочет разные цвета для разных кнопок

2. Возможно, предполагается, что он должен быть красным в соответствии с OP

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

4. Хорошо, я понимаю.

Ответ №4:

Вы можете добиться этого только с помощью CSS и некоторых изменений в HTML.

В примере я использую метки в форме кнопок для запуска входных данных, которые будут управлять визуальной эстетикой кнопок. Это обрабатывается в CSS с помощью селекторов the :checked и смежных для изменения цветов label .button .

 .inputController < display: none; > .inputController:checked .button-greenCK < background-color: green; > .inputController:checked .button-redCK < background-color: red; > .button < font-size: 0.65em; background-color: white; border-radius: 5px; padding: 5px 10px; border: 1px solid lightgrey; box-shadow: 3px 3px 3px rgba(0,0,0,0.25); cursor: pointer; margin-right: 5px; > .button_label <> 

 html lang="en"> head> link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500amp;display=swap" rel="stylesheet"> link href="styles.css" rel="stylesheet"> title>Trivia! title> script> script> head> body> div class="jumbotron"> h1>Trivia! h1> div> div class="container"> div class="section"> h2>Part 1: Single Choice h2> hr> h3>Do you love me?h3> input id="q1button" name="trivia1" class="inputController" type="radio"/> label class="button button-greenCK" for="q1button"> span class="button_value">Yes span> label> input id="q2button" name="trivia1" class="inputController" type="radio"/> label class="button button-redCK" for="q2button"> span class="button_value">No span> label> input id="q3button" name="trivia1" class="inputController" type="radio"/> label class="button button-redCK" for="q3button"> span class="button_label">Maybe span> label> div> div> div class="container"> div class="section"> h2>Part 2: Multiple Choice h2> hr> h3>Do you love me?h3> input id="q4button" name="trivia2" class="inputController" type="checkbox"/> label class="button button-greenCK" for="q4button"> span class="button_value">Yes span> label> input id="q5button" name="trivia2" class="inputController" type="checkbox"/> label class="button button-redCK" for="q5button"> span class="button_value">No span> label> input id="q6button" name="trivia2" class="inputController" type="checkbox"/> label class="button button-redCK" for="q6button"> span class="button_label">Maybe span> label> div> div> body> html> 

Комментарии:

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

Ответ №5:

Вы можете использовать jQuery для добавления имени класса, хранящегося в атрибуте данных. Это упрощает выбор цвета кнопки непосредственно в разметке HTML.

Обратите внимание, что удаление класса color восстанавливает кнопку точно такой, какой она была раньше.

 $(".answer").on("click", function()< // Reset other answers. $(".answer").removeClass("red green") // Use the classname stored in the button's data attribute $(this).addClass($(this).data("color")) >) 

 .green< background: green; > .red< background: red; > 

 script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> script> link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500amp;display=swap" rel="stylesheet"> div class="jumbotron"> h1>Trivia! h1> div> div class="container"> div class="section"> h2>Part 1: Multiple Choice h2> hr> h3>Do you love me? h3> button class="answer" id="q1button" data-color="green">Yes button> button class="answer" id="q2button" data-color="red">No button> button class="answer" id="q3button" data-color="red">Maybe button> div> div> 

 let btns = document.querySelectorAll(".answer") btns.forEach(function(btn)< btn.addEventListener("click", function()< // Reset other answers. btns.forEach(function(btn)< btn.classList.remove("red") btn.classList.remove("green") >) // Use the classname stored in the button's data attribute this.classList.add(this.getAttribute("data-color")) >) >) 

 .green< background: green; > .red< background: red; > 

 link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500amp;display=swap" rel="stylesheet"> div class="jumbotron"> h1>Trivia! h1> div> div class="container"> div class="section"> h2>Part 1: Multiple Choice h2> hr> h3>Do you love me? h3> button class="answer" id="q1button" data-color="green">Yes button> button class="answer" id="q2button" data-color="red">No button> button class="answer" id="q3button" data-color="red">Maybe button> div> div> 

Ответ №6:

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

При нажатии кнопки может быть разумно отменить предыдущий выбор (если таковой имеется) в том же разделе, но в случае, если одновременный выбор разрешен, удалите внутренний if блок.

 document.body.addEventListener('click', (ev) => < let currentTgt = ev.target; let previousSelected, section; /* a button is clicked? */ if (currentTgt.matches('button')) < /* comment the next 'if' block if multiple buttons * selection is allowed at the same time. * * Is a button already active and that button is not * the same button I've just clicked? Then remove the * active class from that button */ section = currentTgt.closest('.section'); previousSelected = section.querySelector('.active'); if (previousSelected amp;amp; currentTgt !== previousSelected) < previousSelected.classList.remove('active'); > currentTgt.classList.toggle('active'); > >) 

 .q1button.active < color: green > .q2button.active, .q3button.active < color: red > 

 div class="section"> h2>Question #1 h2> button class="q1button">Yes button> button class="q2button">No button> button class="q3button">Maybe button> div> div class="section"> h2>Question #2 h2> button class="q1button">Yes button> button class="q2button">No button> button class="q3button">Maybe button> div> 

В качестве примечания я предлагаю использовать классы вместо идентификаторов для кнопок, если вы планируете иметь более одного раздела с несколькими вопросами (и кнопками)

Ответ №7:

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

Вы также должны отменить настройку других кнопок при нажатии другой.

 const btn1= $('#q1button'); const btn2= $('#q2button'); const btn3= $('#q3button'); btn1.click( function() < btn1.css('background', 'green'); btn2.css('background', 'initial'); btn3.css('background', 'initial'); >); btn2.click( function() < btn1.css('background', 'initial'); btn2.css('background', 'red'); btn3.css('background', 'initial'); >); btn3.click( function() < btn1.css('background', 'initial'); btn2.css('background', 'initial'); btn3.css('background', 'red'); >); 

 script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> script> body> div class="jumbotron"> h1>Trivia! h1> div> div class="container"> div class="section"> h2>Part 1: Multiple Choice h2> hr> h3>Do you love me?h3> button id="q1button">Yes button> button id="q2button">No button> button id="q3button">Maybe button> div> div> body> 

Источник

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

Есть страница с двумя таблицами кнопок. Мне нужно чтоб при нажатии кнопки с классом «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
 
 
  

Источник