Edit in JSFiddle

body {
    background-color:#eee;
    padding:50px;
    text-align:center;
}

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);
}

<span>A</span><span>B</span><span>C</span><span>D</span>