Make a transparent circle button with an opaque border and text / font awesome icon
<p>Basically I want a sexy, responsive circle button that is transparent so you can see the background through it, but with an opaque outline so you can see the button and opaque text (or maybe I will add a font-awesome icon at a later stage). </p>

<p>Here is my JS fiddle so you can see what I am trying to do:</p>

<p><a href="http://jsfiddle.net/njd2g94u/" rel="nofollow">http://jsfiddle.net/njd2g94u/</a></p>

<pre><code>.round-button {
    width:25%;
}
.round-button-circle {
    width: 100%;
    height:0;
    padding-bottom: 100%;
    border-radius: 50%;
    border:10px solid #98a1a4;
    overflow:hidden;
}
.round-button-circle {
    width: 100%;
    height:0;
    padding-bottom: 100%;
    border-radius: 50%;
    border:10px solid #98a1a4;
    overflow:hidden;

    background: #fff; 
    background-opacity: 0;
    box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
    background:#30588e;
}
.round-button a {
    display:block;
    float:left;
    width:100%;
    padding-top:50%;
    padding-bottom:50%;
    line-height:1em;
    margin-top:-0.5em;

    text-align:center;
    color:#e2eaf3;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
}
</code></pre>

<p>Thanks in advance!</p>