USF Health Button

A button made with CSS3, to be used in my CSS3 presentation.

by mlms13

HTML

<a href="http://health.usf.edu/medicine">College of Medicine</a>

CSS

body {
    background: #ccc;
    margin: 40px;
}
a {
    background: #186;
    background-image: -webkit-linear-gradient(transparent 20%, rgba(0,0,0,0.3));
    border: 1px solid #075;
    border-top-color: #186;
    border-radius: 16px;
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.35),
        1px 1px 5px rgba(0,0,0,0.5);
    color: #fff;
    display: inline-block;
    font: bold 18px sans-serif;
    padding: 8px 18px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0,0,0,0.4);
    -webkit-transition: background 400ms;
}
a:hover {
    background-color: #297;
    -webkit-transition: background 120ms;
}
a:active {
    padding: 9px 17px 7px 19px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),
        1px 1px 2px rgba(0,0,0,0.3);
}