Untitled

<!DOCTYPE html>
<html>
<head>
	<style>
	/*I just made this background and wanted to save it here*/
	body {
	  background: #988185;
	  background-image: linear-gradient(40deg, rgba(70, 57, 59, 0.05), rgba(128, 0, 21, 0.05)), linear-gradient(135deg, #796366 0%, #796366 10%, #8c7377 11%, #8c7377 40%, #a38f92 41%, #a38f92 50%, #796366 51%, #796366 60%, #8c7377 61%, #8c7377 90%, #a38f92 91%);
	  background-size: 7px 7px, 4px 4px;
	}

	button {
	  outline: none;
	  font-family: 'helvetica neue' sans-serif;
	  font-size: 2em;
	  color: white;
	  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.3);
	  display: block;
	  margin: 2em auto;
	  padding: 23px 37px 25px 35px;
	  cursor: pointer;
	  background-color: #2e050c;
	  background-image: linear-gradient(273deg, #eb4763 30%, #e6193c 40%);
	  border: none;
	  border-radius: 16px;
	  box-shadow: inset 0px 0px 1px 1px rgba(138, 15, 36, 0.9), inset 0px 0px 2px 3px rgba(230, 25, 60, 0.9), inset 1px 1px 1px 4px rgba(255, 255, 255, 0.8), inset 0px 0px 2px 7px rgba(235, 71, 99, 0.8), inset 0px 0px 4px 10px rgba(230, 25, 60, 0.9), 8px 10px 2px 6px rgba(92, 10, 24, 0.55), 0px 0px 3px 2px rgba(184, 20, 48, 0.9), 0px 0px 2px 6px rgba(230, 25, 60, 0.9), -1px -1px 1px 6px rgba(255, 255, 255, 0.9), 0px 0px 2px 11px rgba(230, 25, 60, 0.9), 0px 0px 1px 12px rgba(184, 20, 48, 0.9), 1px 3px 14px 14px rgba(0, 0, 0, 0.4);
	}

	button:active {
	  color: #d9d9d9;
	  padding: 26px 34px 22px 38px;
	  background-image: linear-gradient(273deg, #e6193c 50%, #e8304f 60%);
	  box-shadow: inset 3px 4px 3px 2px rgba(92, 10, 24, 0.55), inset 0px 0px 1px 1px rgba(138, 15, 36, 0.9), inset -1px -1px 2px 3px rgba(230, 25, 60, 0.9), inset -2px -2px 1px 3px rgba(255, 255, 255, 0.8), inset 0px 0px 2px 7px rgba(235, 71, 99, 0.8), inset 0px 0px 3px 10px rgba(230, 25, 60, 0.9), 0px 0px 3px 2px rgba(184, 20, 48, 0.9), 0px 0px 2px 6px rgba(230, 25, 60, 0.9), -1px -1px 1px 6px rgba(255, 255, 255, 0.9), 0px 0px 2px 11px rgba(230, 25, 60, 0.9), 0px 0px 1px 12px rgba(184, 20, 48, 0.9), 1px 3px 14px 14px rgba(0, 0, 0, 0.4);
	}

	</style>
</head>
<body>
<form action="http://nufriends-swaar.appspot.com/setevent" method="post">
    <input style="display: none;" name="id" value="1" />
    <input style="display: none;" type="submit" value="Submit" />
</form>

	<button id="walkie-talkie"> LAUNCH !!!! </button>

	<script>
	var walkieTalkieButton = document.getElementById('walkie-talkie');

	walkieTalkieButton.addEventListener('mousedown', buttonDown, false);
	walkieTalkieButton.addEventListener('mouseup', buttonUp, false);

	function buttonDown() {
	  console.log("Virker dette? :)")
	  walkieTalkieButton.classList.add('down-state');
	  submitForm();

	}

	function buttonUp() {
      document.getElementById("walkie-talkie").innerHTML = "Did it work?";
	  walkieTalkieButton.classList.remove('down-state');
	}

	function submitForm() {
	    var http = new XMLHttpRequest();
	    http.open("POST", "http://nufriends-swaar.appspot.com/setevent", true);
	    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	    var params = "id=" + 1;
	    http.send(params);
	    http.onload = function() {
	        alert(http.responseText);
	    }
	}
	</script>
</body>
</html>