Shadow effect when mouse hover the CSS Button

Shadow effect when mouse hover the CSS Button that is no where as cool as here. Developed using css and html. Demo and download available.

HTML Snippet

<div id="button"> 
  <h2>w3tweaks</h2>
  <div id="buttonTwo"> 
    <h2>w3tweaks</h2>
  </div>
  <div id="buttonThree"> 
    <h2>w3tweaks</h2>
  </div>
</div>

CSS Code

@import url("https://fonts.googleapis.com/css?family=Niramit");
html,
body {
  background: linear-gradient(to right, #659999, #f4791f);
  display: flex;
  font-family: Niramit, "sans-serif";
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  margin: 0;
}

#button,
#buttonTwo,
#buttonThree {
  border: 1px solid white;
  color: white;
  width: 12em;
  height: 3em;
  text-align: center;
  transition: all 0.5s;
}

h2 {
  line-height: 0.5em;
}

#buttonTwo,
#buttonThree {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  margin-top: -51.5px;
}

#button:hover {
  cursor: pointer;
}

#button:hover #buttonTwo,
#button:hover #buttonThree {
  visibility: visible;
  opacity: 0.33;
}

#button:hover #buttonTwo {
  -webkit-transform: translateX(-3em) translateY(-3em);
          transform: translateX(-3em) translateY(-3em);
}

#button:hover #buttonThree {
  -webkit-transform: translateX(3em) translateY(3em);
          transform: translateX(3em) translateY(3em);
}

Preview