Html buttons background color

How to change the background-color of a «visited» button in CSS?

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

2 Answers 2

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

    Button1 Button2 Button3 
Test <a> visited  

Update

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

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?

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:

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 🙂

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.

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.

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

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.

Источник

CSS Buttons

Use the background-color property to change the background color of a button:

Example

Button Sizes

Use the font-size property to change the font size of a button:

Example

Use the padding property to change the padding of a button:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Example

.button1
.button2
.button3
.button4
.button5

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

Example

Colored Button Borders

Use the border property to add a colored border to a button:

Example

Hoverable Buttons

Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the «hover» effect:

Example

.button <
transition-duration: 0.4s;
>

.button:hover background-color: #4CAF50; /* Green */
color: white;
>
.

Shadow Buttons

Use the box-shadow property to add shadows to a button:

Example

.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>

.button2:hover box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>

Disabled Buttons

Use the opacity property to add transparency to a button (creates a «disabled» look).

Tip: You can also add the cursor property with a value of «not-allowed», which will display a «no parking sign» when you mouse over the button:

Example

Button Width

By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

Example

Button Groups

Remove margins and add float:left to each button to create a button group:

Example

Bordered Button Group

Use the border property to create a bordered button group:

Example

Vertical Button Group

Use display:block instead of float:left to group the buttons below each other, instead of side by side:

Example

Button on Image

Button

Animated Buttons

Example

Example

Add a «pressed» effect on click:

Example

Example

Add a «ripple» effect on click:

Источник

Change background color with button in HTML page (how to use more than 1 color)

So far I can get my background color on my page to change when I click the button but only to the 1 set color. I want to be able to keep clicking on the button and get a different color each time or at least a handful of different preset colors. This is what I have just now.

Change Color function myFunction() 

There are different ways to implement it, partly depending on what you want. Some answers here assume that you want random colors, which is a rather random assumption. You can set up e.g. a selection between given colors using a select element or let the user select a color from a color picker (on supporting browsers) using .

10 Answers 10

This function should work. First generate a random number between 1 and 10, and just have switch with the changing

This is a example, of what you want.

    Change color  

function get_random_color() < var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) return color; > 

$(document).ready(function()< setColor(); function setColor()< var colors=["#33ccff", "#ffff99","#cc6699"]; var color =Math.floor(Math.random() * (colors.length)); $('body').toggleClass('clicked'); setTimeout(function()< $('.clicked').css("background-color", colors[color]); $('body').removeClass('clicked'); >, 200) > $('#gen').on("click", function()< setColor(); >); >);

function black() < document.body.style.backgroundColor="black" >function blue() < document.body.style.backgroundColor="blue" >function fuchsia() < document.body.style.backgroundColor="fuchsia" >function green() < document.body.style.backgroundColor="green" >function orange() < document.body.style.backgroundColor="#c44000" >function purple() < document.body.style.backgroundColor="purple" >function red() < document.body.style.backgroundColor="red" >function oil() < document.body.style.backgroundColor="#808000" >function white() < document.body.style.backgroundColor="white" >function brown() < document.body.style.backgroundColor="brown" >function yellow() < document.body.style.backgroundColor="yellow" >function lgreen()

var isBlack = 0; function changeBackground() < if (isBlack == 0)< var backgr = document.getElementById('bg').style="background-color:#52b0d6; color:white;"; document.getElementById('selectback').innerHTML="CHANGE WEB BACKGROUND COLOR. (#2)"; document.getElementById('selectback').style="background-color:#464141;"; isBlack=true; isBlack= 1; >else < var dftBg = document.getElementById('bg').style="background-image:url('issets/images/backgrnd.jpg'); color:white;"; document.getElementById('selectback').innerHTML="RESTORE TO DEFAULT BACKGROUND COLOR. (#3)"; document.getElementById('selectback').style="background-color:black;"; document.getElementById('centered').style="background-color:#464141;"; isBlack=true; isBlack= 0; >> 

var background = document.querySelector("body"); var text = document.querySelector("h1") var colorButton = document.querySelector(".myClass"); colorButton.addEventListener("click", colorChange); function colorChange() < var colorSet = [< background: "#f7c5cc", text: "#cc313d" >, < background: "#000", text: "#fff" >, < background: "#fff", text: "#000" >, < background: "#234e70", text: "#fbf8be" >, < background: "#fcedda", text: "#ee4e34" >, ]; //to have the colors come in a random order var random = Math.floor(Math.random() * colorSet.length); //and then you would change each element individually background.style.backgroundColor = colorSet[random].background; text.style.color = colorSet[random].text; // if you wanted to just change the background, replace "var colorSet" with an array like this: //var colorSet = ["red", "orange", "yellow", "green", "#f7c5cc"]; // and select the color like this: //background.style.backgroundColor = colorSet[random]; >

   
Hi
 click me to change colors