<div id="background"></div>

<button class="item" id="b1">
  <div class="icon"></div>
  <label>Pokémon</label>
</button>
<button class="item" id="b2">
  <div class="icon"></div>
  <label>Items</label>
</button>
<button class="item" id="b3">
  <div class="icon"></div>
  <label>Shop</label>
</button>
<button class="item" id="b4">
  <div class="icon"></div>
  <label>Pokédex</label>
</button>

<button id="home"></button>
<button id="close">
  <div class="icon"></div>
</button>

html, body {
  height: 100%;
  margin: 0;
  background-image: url(https://i.imgur.com/SYB112l.png);
  background-size: cover;
  background-repeat: no-repeat;
}

#background {
  background: rgba(255,255,255,0.9);
  background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.9) 0%, rgba(195,251,184,0.9) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,255,255,0.9)), color-stop(100%, rgba(195,251,184,0.9)));
  background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.9) 0%, rgba(195,251,184,0.9) 100%);
  background: -o-linear-gradient(-45deg, rgba(255,255,255,0.9) 0%, rgba(195,251,184,0.9) 100%);
  background: -ms-linear-gradient(-45deg, rgba(255,255,255,0.9) 0%, rgba(195,251,184,0.9) 100%);
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(195,251,184,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c3fbb8', GradientType=1 );

  display:block;
  width: 100%;
  height: 100%;
  opacity: 0;
  -moz-transition: opacity .2s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
}

button{
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 100%;
  text-align: center;
}

button label {
  width: 100%;
  text-transform: uppercase;
  color: #1d8696;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -22px;
  font-size: 7pt;
  font-weight: 600;
  letter-spacing: .5px;
}

button .icon{
  display: block;
  width: 50px;
  height: 50px;
  background-size: contain;
  z-index: 15;
  top: -2px;
  left: -2px;
  position: absolute;
}

#b1 .icon{
    background-image: url(https://i.imgur.com/TPjpw1X.png);
}
#b2 .icon{
    background-image: url(https://i.imgur.com/ND09g0n.png);
}
#b3 .icon{
    background-image: url(https://i.imgur.com/b6V4i3w.png);
}
#b4 .icon{
    background-image: url(https://i.imgur.com/SpQtMSj.png);
}
#close .icon{
    width: 40px;
    height: 40px;
    top: -2px;
    left: -2px;
    background-image: url(https://i.imgur.com/VxDV1ox.png);
}

input, button, submit { border:none; } 
button:focus {
  outline: none;
}

#home {
  background-color: #ff3945;
  z-index: 10;

  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  box-shadow: inset 0 0 0 2px rgba(212,211,211,.5), 0 0 2pt 1pt #979797;
}

#home::before{
  content: '';
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  z-index: 12;
  border-radius: 20px;
  background-color: #b9b9b9;
  border: #ffffff 3px solid;
  top: 11px;
  left: 11px;
}

#home::after{
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 20px;
  z-index: 11;
  border-radius: 0 0 40px 40px;
  background-color: #ffffff;
  bottom: 0px;
  left: 0px;
  box-shadow: inset 0 0 0 2px rgba(212,211,211,.5);
}

#close {
  background-color: rgba(255,255,255,.2);
  width: 40px;
  height: 40px;
  bottom: 30px;
  z-index: 9;
  transform: scale(1.5,1.5);
  opacity: 0;
  -moz-transition: all .4s cubic-bezier(.19,0,0,1.45);
  -webkit-transition: all .4s cubic-bezier(.19,0,0,1.45);
  transition: all .4s cubic-bezier(.19,0,0,1.45);
  border: rgba(192,192,192,.5) 2px solid;
}

#close:active {
  background-color: rgba(190,190,190,.3);
}

#close::before {
  background-color: #f0fff1;
  content: '';
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  z-index: 11;
  border-radius: 100%;
  border: #1d8696 1px solid;
  top: 4px;
  left: 4px;
  -moz-transition: all .4s cubic-bezier(.19,0,0,1.45);
  -webkit-transition: all .4s cubic-bezier(.19,0,0,1.45);
  transition: all .4s cubic-bezier(.19,0,0,1.45);
}

#close:active::before {
  background-color: rgba(190,190,190,.3);
}

.item {
  background-color: rgba(255,255,255,.2);
  -moz-transition: all .4s cubic-bezier(.19,0,0,1.45);
  -webkit-transition: all .4s cubic-bezier(.19,0,0,1.45);
  transition: all .4s cubic-bezier(.19,0,0,1.45);
  opacity: 0;
  border: rgba(192,192,192,.5) 2px solid;
  width: 50px;
  height: 50px;
}
.item:active {
  background-color: rgba(190,190,190,.3);
}

.item::before {
  background-color: #f0fff1;
  content: '';
  position: absolute;
  display: block;
  width: 36px;
  height: 36px;
  z-index: 11;
  border-radius: 100%;
  border: #1d8696 1px solid;
  top: 4px;
  left: 4px;
  -moz-transition: all .4s cubic-bezier(.19,0,0,1.45);
  -webkit-transition: all .4s cubic-bezier(.19,0,0,1.45);
  transition: all .4s cubic-bezier(.19,0,0,1.45);
}

.item:active::before {
  background-color: rgba(190,190,190,.3);
}

$('#home').click(function(){
  $(this).css({
    'opacity': 0,
    'z-index': 8
  });
  $('#close').css({
    'opacity': 1,
    'transform': 'scale(1,1)'
  });
  $('#background').css('opacity', 1);
  $('#b1').css({
    'opacity': 1,
    'transform': 'translate(-80px,-30px)'
  });
  $('#b2').css({
    'opacity': 1,
    'transform': 'translate(80px,-30px)'
  });
  $('#b3').css({
    'opacity': 1,
    'transform': 'translate(0px,-100px)'
  });
  $('#b4').css({
    'opacity': 1,
    'transform': 'translate(0px,-200px)'
  });
});

$('#close').click(function(){
  $(this).css({
    'opacity': 0,
    'transform': 'scale(0,0)'
  });
  $('#home').css({
    'opacity': 1,
    'z-index': 10
  });
  $('#background').css('opacity', 0);
  $('#b1, #b2, #b3, #b4').css({
    'opacity': 0,
    'transform': 'translate(0px,0px)'
  });
  setTimeout(function(){
    $('#close').css('transform','scale(1.5,1.5)');
  }, 100);
});