Kotak Melayang

CSS

span {
  display:inline-block;
  position:relative;
  background-color:white;
  width:70px;
  height:70px;
  margin:0 5px;
  -webkit-box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
  -moz-box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
  box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  font:normal normal 30px/70px "Comic Sans MS",Verdana,Arial,Sans-Serif;
  text-align:center;
  color:#888;
  cursor:default;
}

span:hover {
  top:5px;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.2);
  -moz-box-shadow:0 2px 2px rgba(0,0,0,.2);
  box-shadow:0 2px 2px rgba(0,0,0,.2);
}

span:active {
  top:6px;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}

Demo

Lihat Demo