制作带有不透明边框和文字/字体真棒图标的透明圆形按钮 [英] 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 (or maybe I will add a font-awesome icon at a later stage).

这是我的JS小提琴，所以你可以看到我想要做什么：

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

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

提前感谢！

推荐答案

没有 background-opacity 。可能你在找这个：

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

小提琴： http://jsfiddle.net/xppow236/

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

这篇关于制作带有不透明边框和文字/字体真棒图标的透明圆形按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！