制作一个带有不透明边框和text/font图标的透明圆形按钮

Question

基本上，我想要一个性感、灵敏的圆形按钮，它是透明的，这样你就可以通过它看到背景，但有一个不透明的轮廓，这样你可以看到按钮和不透明的文本（或者我可能会在后期添加一个字体很棒的图标）。

这是我的JS小提琴，所以你可以看到我正在尝试做什么：

http://jsfiddle.net/njd2g94u/

.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;
}

提前感谢！

Answer 1

对于具有透明度的颜色，可以也应该使用rgba。最后一个参数是透明度级别，从0到1的任意数字。下面的颜色大致相当于"#98a1a4"

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

Answer 2

没有background-opacity。也许你正在寻找这个：

.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: 0 0 3px gray;
}

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