0

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);
}
A.McC
  • 1
  • 1
  • 1
  • 2
    Possible duplicate of [javascript change background color on click](http://stackoverflow.com/questions/31089414/javascript-change-background-color-on-click) – kind user Mar 13 '17 at 00:27
  • I just answered a similar question hours ago. You may want to take a look [here](http://stackoverflow.com/a/42752735/2341603). – Obsidian Age Mar 13 '17 at 00:28

2 Answers2

0

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>
norcal johnny
  • 2,050
  • 2
  • 13
  • 17
0

A simple JQuery script will accomplish this:

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

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

symlink
  • 11,984
  • 7
  • 29
  • 50
  • 1
    OP asked for js, css or html not jquery. – norcal johnny Mar 13 '17 at 01:25
  • @norcaljohnny JQuery is almost synonymous with javascript. A newbie will likely find it easier to start out with. Unless they specifically say no JQuery, I see nothing wrong with teaching it. – symlink Mar 13 '17 at 01:32
  • I agree that jquery is a good feature and prefer it but something as simple as color change can be done in CSS without loading extra scripts. But I do agree. – norcal johnny Mar 13 '17 at 01:36