Untitled

<!DOCTYPE html>

<html>
<body>
<center>
<p><h2> HEHEHHEEHE</h2></p>
<p><h2> HEHEHHEEHE</h2></p>
<p><h2> HEHEHHEEHE</h2></p>
<p><h2> HEHEHHEEHE</h2></p>

<img id="Change Lights" src="http://i.imgur.com/8LOZdpP.png" width="170" height="240">


 <br><button onclick="nxt()" <button class="button"><span>Traffic Lights! </span></button></br>
<body background="http://i.imgur.com/B29Ylw3.gif"; style="background-size: 100%;">
 <script>
var img = new Array("http://i.imgur.com/8LOZdpP.png","http://i.imgur.com/t1HWK0e.png", "http://i.imgur.com/zCjdFPS.png", "http://i.imgur.com/67zBQ5F.png","http://i.imgur.com/zCjdFPS.png");
var imgElement = document.getElementById("Change Lights");
var lights = 0;
var imgLen = img.length;
function nxt()
{
if(lights < imgLen-1)
{
lights++;
}
else{
lights=0;
}
imgElement.src = img[lights];
}
</script>
	<style>
	h2 {
	visibility: hidden;
	}

	img {
	border-radius: 75%;
	}


	.button {
	  border-radius: 4px;
	  background-color: Yellow;
	  border: none;
	  color: ;
	  text-align: center;
	  font-size: 28px;
	  padding: 20px;
	  width: 300px;
	  transition: all 0.5s;
	  cursor: pointer;
	  margin: 5px;
	}

	.button span {
	  cursor: pointer;
	  display: inline-block;
	  position: relative;
	  transition: 0.5s;
	}

	.button span:after {
	  content: '\00bb';
	  position: absolute;
	  opacity: 0;
	  top: 0;
	  right: -20px;
	  transition: 0.5s;
	}

	.button:hover span {
	  padding-right: 25px;
	}

	.button:hover span:after {
	  opacity: 1;
	  right: 0;
	}
	</style>


</body>
</html>