@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: normal;
    src: local('Pacifico'), url('http://themes.googleusercontent.com/font?kit=fKnfV28XkldRW297cFLeqfesZW2xOQ-xsNqO47m55DA') format('truetype');
}
#button {
    border-radius: 8px;
    box-shadow: 0 8px 0 rgba(57, 55, 197, 0.32), 0 15px 20px rgba(0, 0, 0, .35);
    color: #fff;
    display: inline-block;
    font-size: 32px;
    margin-bottom: 16px;
    transition: box-shadow .1s ease-in-out;
}
#button span {
    background-color: #638ec8;
    background-image: -webkit-linear-gradient(#9fd6fa, hsl(238, 90%, 70%));
    border-radius: 8px;
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
    display: inline-block;
    font-family: 'Pacifico', Arial, sans-serif;
    line-height: 1;
    padding: 20px 30px;
    text-shadow: 0 -1px 1px rgba(175, 49, 95, .7);
    transition: background-color .2s ease-in-out, transform .1s ease-in-out;
}
#button:hover span {
    background-color: #ec6a9c;
    text-shadow: 0 -1px 1px rgba(175, 49, 95, .9), 0 0 5px rgba(255, 255, 255, .8);
}
#button:active, #button:focus {
    box-shadow: 0 8px 0 #9fd6fa, 0 12px 10px rgba(0, 0, 0, .3);
}
#button:active span {
    transform: translate(0, 4px);
}