单击按钮时更改背景颜色

Question

I am a new to coding and I have a little thing I'm working on. I am trying to get the background of the page to change when I click on this button. As I am new to coding, I don't know the right method to use for this. Any suggestions would help. Here's what I have in html & css so far.

<div class="wrapper>
<p>Click on the button to see the magic happen!</p>
<input class="button" type="button" value="Click Me">

Then in CSS I have the following:

.wrapper{
text-align: center;
}
.button{
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #EE835A;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #EE8354A}

.button:active {
background-color: #4A6273;
box-shadow: 0 5px #F68B8B;
transform: translateY(4px);
}

Answer 1

Took the time to do it, you have a few things wrong, take a look and see. This is also a pure CSS solution.

You have one too many characters in your hover color. There should be 6 not 7. I replaced it with black #000000, as I was uncertain what color you want.

Also, adding a subtle transition is a nice look.

transition: .3s

 .button:hover {background-color: #000000; transition: .3s} body {background-color: white;} .button:active { background-color: #4A6273; box-shadow: 0 5px #F68B8B; transform: translateY(4px); } .wrapper{ text-align: center; } .button{ display: inline-block; padding: 15px 25px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #EE835A; border: none; border-radius: 15px; box-shadow: 0 9px #999; transition: .3s; } 

 <div class="wrapper"> <p>Click on the button to see the magic happen!</p> <button class="button" onclick="document.body.style.backgroundColor = 'green';"></button> 

Answer 2

A simple JQuery script will accomplish this:

$('.button').click(function(e){
    e.preventDefault();
    $('body').css({'background':'red'});
});

https://jsfiddle.net/f1rkyxs7/2/