CSS 応用
CSSのみで立体的なボタンをつくる
<a class="button">Button</a>

.button {
    display: inline-block;
    width: 200px;
    height: 54px;
    text-align: center;
    line-height: 54px;
    outline: none;
    position: relative;
    background-color: #1abc9c;
    border-radius: 4px;
    
    line-height: 52px;
    box-shadow: 0 3px 0 #0e8c73;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    text-decoration: none;
    color: #fff;
}

.button:hover {
    background-color: #31c8aa;
    box-shadow: 0 3px 0 #23a188;
    color: #fff;
    text-decoration: none;
}
.button:active{
    top: 3px;
    box-shadow: none;
    color: #fff;
    text-decoration: none;
}
.button:focus{
    top: 3px;
    box-shadow: none;
    color: #fff;
    text-decoration: none;
}
結果
Button