0

I'm trying to change the background-color of a button after it has been clicked (and possible make it so that you can't click it again), but can't figure out how to change the color. I'd like to use only HTML and CSS for this. How do I do this?

body {
    background-color: white;
}

.button {
  font-family: "Arial", sans-serif;
  background-color: black;
  border: 10px dashed white;
  color: white;
  font-size: 30px;
  text-align: center;
  line-height: 0;
  cursor:pointer;
  border-radius: 8px;
  height:200px;
  width:400px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.button:visited{
  background-image:none;
  background-color: red;
  font-size: 35px;
  border: 10px dashed black;
  color: black;
}

.button:hover{
  background-image:none;
  background-color: white;
  font-size: 35px;
  border: 10px dashed black;
  color: black;
}
<button class="button" type="button" onclick="onClick()">Button</button>
Max Muchnick
  • 55
  • 4
  • 9

2 Answers2

0

You can't use only HTML and CSS; you need JavaScript. Note that in your button onclick="onClick()" was a JavaScript function.

Using JavaScript you could change the button class name into button visited which make the CSS selector of .button and .visited work.

Note that :visited is used on a tag and not a button. See snippet for example:

var clicks = 0; 
function onClick(event) { 
    event.className = "button visited";
    if (clicks >= 2) { 
     alert("WRONG! YOU LOSE! TRY AGAIN!"); 
     // window.location.href = 'index.html'; 
    } 
     clicks += 1; 
     // document.getElementById("clicks").innerHTML = clicks;
};
body {
background-color: white;
}

.button {
  font-family: "Arial", sans-serif;
  background-color: black;
  border: 10px dashed white;
  color: white;
  font-size: 30px;
  text-align: center;
  line-height: 0;
  cursor:pointer;
  border-radius: 8px;
  height:200px;
  width:400px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.visited{
  background-image:none;
  background-color: red;
  font-size: 35px;
  border: 10px dashed black;
  color: black;
}

.button:hover{
  background-image:none;
  background-color: white;
  font-size: 35px;
  border: 10px dashed black;
  color: black;
}

a:visited {
  color: purple;
}
<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="style.css">


<body>
<button id="button1" class="button" type="button" onclick="onClick(this)">Button1</button>
<button id="button2" class="button" type="button" onclick="onClick(this)">Button2</button>
<button id="button3" class="button" type="button" onclick="onClick(this)">Button3</button>
<br/><a href="#">Test &lt;a&gt; visited</a>
</body>
</html>

Update

If you had more than 1 element for onclick event you can use:

<button id="button1" class="button" type="button" onclick="onClick(this)">Button1</button>
<button id="button2" class="button" type="button" onclick="onClick(this)">Button2</button>
<button id="button3" class="button" type="button" onclick="onClick(this)">Button3</button>

then change into 

function onClick(event) { 
     event.className = "button visited";
  // rest of code below
Mukyuu
  • 6,436
  • 8
  • 40
  • 59
  • I tried this and my code still doesn't work. I have a java script function in the full code, I just didn't post it here. All I want it for someone to click a button and the background color to change. I don't want the button to be linked to anything or do anything else. How can I do this? – Max Muchnick Feb 06 '19 at 02:12
  • Can you add your javascript code or make a snippet/fiddle? – Mukyuu Feb 06 '19 at 02:18
  • The javascript code is in HTML. I'm basically trying to make a trivia game where there are buttons that are options and when you click on the wrong answer it turns a different color and does nothing. Heres the javascript: – Max Muchnick Feb 06 '19 at 02:21
  • I don't see any problem. Can you see the updated snippet? (Note that I commented out 2 part you don't need to commented that out too) Probably you're missing some of the explanation above. If you have any question just comment again :) – Mukyuu Feb 06 '19 at 02:29
  • The part that you commented out is needed in the javascript and it shouldn't affect the css. All I want is to be able to have button that does nothing and when clicked on changed colors. It doesn't need to be with the code I have, I just want to be able to use it in the code. – Max Muchnick Feb 06 '19 at 02:33
  • That's why I said you don't need to commented that out too :) It was just for demo, since there is no `index.html` and element with `clicks` as id there. The current snippet already did what you asked for. Just remove the `console.log` out and you're set. You're probably missing `.visited` css part. – Mukyuu Feb 06 '19 at 02:34
  • It kinda works with the commented part removed. The buttons change color after it is clicked three times, but is there a way I change have it changed after just once? – Max Muchnick Feb 06 '19 at 02:40
  • move it out to above of the `if` part. see updated snippet – Mukyuu Feb 06 '19 at 02:41
  • I tried to move it above the if part, but it still didn't work. It does work if the button is clicked 3 times, just not once. – Max Muchnick Feb 06 '19 at 02:43
  • @MaxMuchnick really? have you seen the updated snippet? I don't see the issue. – Mukyuu Feb 06 '19 at 02:45
  • That works for now. I'll put it into my full code just to make sure. – Max Muchnick Feb 06 '19 at 02:47
  • Now there's an issue where I have multiple buttons and when you click on one button, it affects the others. Is there a way I can make it so only one button is affected when you click on it, but still have other buttons be able to do this? – Max Muchnick Feb 06 '19 at 03:36
  • Either separate the function or the selector id. Supposed that you only want to change the color. Then gave the other button different id. – Mukyuu Feb 06 '19 at 03:40
  • I'm not sure what you mean. Here is the java script: var clicks = 0; function onClick() { document.getElementById("button1").className = "button visited"; document.getElementById("button2").className = "button visited"; document.getElementById("button3").className = "button visited"; if (clicks >= 2) { alert("WRONG! YOU LOSE! TRY AGAIN!"); window.location.href = 'index.html'; } clicks += 1; document.getElementById("clicks").innerHTML = clicks; }; – Max Muchnick Feb 06 '19 at 03:42
  • Here is the HTML for the buttons: And here is the HTML for the buttons:


    – Max Muchnick Feb 06 '19 at 03:43
  • Okay, so how do you mean by affecting the others? And which one do you want to be different with the rest and how? Note that with how you're using the HTML `button onclick` they're executing the same function which is `onClick()`. – Mukyuu Feb 06 '19 at 03:44
  • When you click any of the buttons with id button1, button2, and button3, all of those buttons change color. I'm trying to make it so only the button you click on changes. – Max Muchnick Feb 06 '19 at 03:47
  • I see, check the updated snippet. Refer to [this](https://stackoverflow.com/questions/1553661/how-to-get-the-onclick-calling-object) for more info. Also just a suggestion better if you include all the code you have and what you expected in the next questions you make :) – Mukyuu Feb 06 '19 at 04:02
  • Still can't figure out how to only get one button to change when only that button is clicked. Isn't there a simple answer, like something with the javascript or HTML? It works, it just changed all the buttons when one is clicked. Would add the whole code its just really big and a few pages. – Max Muchnick Feb 06 '19 at 04:09
  • Have you refer to the updated snippet? It's only 3 line change from `onclick="onClick()"` into `onclick="onClick(this)"` and from `function onClick() { document.getElementById("button1").className = "button visited";` into `function onClick(event) { event.className = "button visited";` – Mukyuu Feb 06 '19 at 04:11
  • I have. Pasted that right over the old code in my full code and it still affects all three buttons when only one is clicked. – Max Muchnick Feb 06 '19 at 04:16
  • I would suggest you go [here](https://stackoverflow.com/questions/ask) since it's a different question altogether. Note that the original question and the follow-up questions had a different direction. – Mukyuu Feb 06 '19 at 04:19
  • The questions are related though and since you already helped with the previous question I figured it would be better if I keep it here. – Max Muchnick Feb 06 '19 at 04:23
  • Well, notice that the original question is about changing the color of a button. And slowly it's changed into multiple buttons. Then about javascript function, which are confusing since what you had and what you expect wasn't stated clearly. Anyway, [this](https://stackoverflow.com/questions/42277092/javascript-function-on-multiple-buttons) might be related to what you need, if you still had any question [read this first](https://stackoverflow.com/help/how-to-ask), then go [ask a new question](https://stackoverflow.com/questions/ask). – Mukyuu Feb 06 '19 at 04:26
0

You can do what you want to but not with button tag. The :visited selector is used to select visited "links" and hence it only works on the anchor tag with href fields.

From w3schools:

Browsers limits the styles that can be set for a:visited links, due to security issues.

Allowed styles are:

color
background-color
border-color (and border-color for separate sides)
outline color
column-rule-color
the color parts of fill and stroke

All other styles are inherited from a:link.

body {
    background-color: white;
}

.button {
  font-family: "Arial", sans-serif;
  background-color: black;
  border: 10px dashed white;
  color: white;
  font-size: 30px;
  text-align: center;
  line-height: 0;
  cursor:pointer;
  border-radius: 8px;
  height:200px;
  width:400px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.button:visited{
  background-image:none;
  background-color: red;
  font-size: 35px;
  border: 10px dashed black;
  color: purple;
}

.button:hover{
  background-image:none;
  background-color: white;
  font-size: 35px;
  border: 10px dashed black;
  color: blue;
}
<a class="button" href="google.com" target="_blank">Button</a>

If your project specifically wants to avoid href, then you would have to use javascript. If you also want the style to remain after the page reloads, then you have to do it from backend using sessions.

Soham Zemse
  • 261
  • 2
  • 6