Make A Transparent Circle Button With An Opaque Border And Text / Font Awesome Icon

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

Solution 1:

you can and should use rgba for colors with transparency. The last parameter is the transparency level, any number from 0 to 1. The color below is roughly equivalent to "#98a1a4."

border: 10px solid rgba(151, 162, 164, 0.25);

Solution 2:

There's no background-opacity. May be you are looking for this:

.round-button-circle {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  border: 10px solid #98a1a4;
  overflow: hidden;
  background: transparent; /* Change it to transparent *//* remove background-opacity */box-shadow: 003px gray;
}

Fiddle: http://jsfiddle.net/xppow236/