<div class="container">
  <div class="led-box">
    <div class="led"></div>
  </div>
</div>
<button id="red-button">Red</button>
<button id="blue-button">Blue</button>
<button id="yellow-button">Yellow</button>

.hidden {
  display: none;
}

.container {
	background-size: cover;
  background: rgb(226,226,226);
  background: -moz-linear-gradient(top,  rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1)));
  background: -webkit-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
  background: -o-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); 
  background: -ms-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
  background: linear-gradient(to bottom,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 );
  padding: 20px;
}

.led-box {
  height: 30px;
  width: 25%;
  margin: 10px 0;
  float: left;
}

.led-box p {
  font-size: 12px;
  text-align: center;
  margin: 1em;
}

.led {
  margin: 0 auto;
  width: 35px;
  height: 35px;
  background-color: #FFF;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(0, 0, 0, 0.5) 0 2px 12px;
}


.led.red {
  background-color: #F00;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
}

.led.blue {
  background-color: #00F;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(0, 0, 255, 0.7) 0 2px 0;
}

.led.yellow {
  background-color: #FF0;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 255, 0, 0.7) 0 2px 0;
}

.led.off {
  background-color: #000;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(0, 0, 0, 0.0) 0 2px 0;
}

var firebaseConfig = {
    apiKey: "AIzaSyBHcN0HVMwxxW-xBkXHYAm2X-kGWjxPzNk",
    authDomain: "basiccrud-ffe19.firebaseapp.com",
    databaseURL: "https://basiccrud-ffe19.firebaseio.com",
    projectId: "basiccrud-ffe19",
    storageBucket: "basiccrud-ffe19.appspot.com",
    messagingSenderId: "47974982638",
    appId: "1:47974982638:web:9a034202ca787ee47764ff"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

let setStatus = function(status){
  $(".led").attr("class",`led ${status}`);
}

let theNetwork = firebase.database().ref("beacon");

theNetwork.on("value", ss=>{
  let status = ss.val();
  setStatus(status);
})

$("#red-button").on("touchstart mousedown", function(e){
  e.preventDefault();
  theNetwork.set("red");
});

$("#red-button").on("mouseup touchend", function(e){
  e.preventDefault();
  theNetwork.set("off");
});

$("#blue-button").on("touchstart mousedown", function(e){
  e.preventDefault();
  theNetwork.set("blue");
});

$("#blue-button").on("mouseup touchend", function(e){
  e.preventDefault();
  theNetwork.set("off");
});

$("#yellow-button").on("touchstart mousedown", function(e){
  e.preventDefault();
  theNetwork.set("yellow");
});

$("#yellow-button").on("mouseup touchend", function(e){
  e.preventDefault();
  theNetwork.set("off");
});