title: Make a transparent circle button with an opaque border and text / font awesome icon
body: <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>