Boton vinculo con CSSIII

Usability post explica como implementar un efecto apretado a un botón en los enlaces personalizados usando solo CSS3.

B o t ó n

/* Botón en general */
.button-link {
    font-size: 18px; /* tamaño de letra */
    width: 150px; /* ancho */
    text-align: center; /* alineación del texto */
    padding: 10px 15px; /* expansión */
    background: #4479ba; /* color de fondo */
    color: #fff; /* color de texto */
    -webkit-border-radius: 4px; /* borde redondeado para webkit */
    -moz-border-radius: 4px; /* borde redondeado para mozilla */
    border-radius: 4px; /* borde redondeado */
    border: solid 1px #20538d; /* borde */
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); /* texto con sombra */
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); /* caja con sombra para webkit */
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); /* caja con sombra para mozilla */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); /* caja con sombra */
    -webkit-transition-duration: 0.2s; /* duración de transición para webkit */
    -moz-transition-duration: 0.2s; /* duración de transición para mozilla */
    transition-duration: 0.2s; /* duración de transición */
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

/* Botón hover */
.button-link:hover {
    background: #356094; /* Color de fondo */
    border: solid 1px #2a4e77; /* Borde */
    text-decoration: none; /* Decoración de texto */
}

/* Botón activado */
.button-link:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); /* Caja con sombra para webkit */
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); /* Caja con sombra para mozilla */
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); /* Caja con sombra */
    background: #2e5481; /* Color de fondo */
    border: solid 1px #203e5f; /* Borde */
}

<p class="button-link"><b>B o t ó n</b></p>