Edit in JSFiddle

<a href="#" class="r"> </a>
<a href="#" class="r r2"> </a>

.r {
    background: transparent url(http://columnfivemedia.com/wp-content/themes/columnfivemedia/images/subnav-social-pr.gif) no-repeat 0 0;
    width: 148px;
    height: 148px;
    padding: 0;
    display: inline-block;
    border: 6px solid white;
    -webkit-box-shadow: 3px 3px 6px #DDD;
    -moz-box-shadow: 3px 3px 6px #DDD;
    box-shadow: 3px 3px 6px #DDD;
    -webkit-border-radius: 77px;
    -moz-border-radius: 77px;
    -o-border-radius: 77px;
    border-radius: 77px;
}
.r:hover {
    background-position:0 -148px;
}

.r2 {
    background: transparent url(http://columnfivemedia.com/wp-content/themes/columnfivemedia/images/subnav-content-strategy.gif) no-repeat 0 0;
}