对透明 HTML/CSS 按钮不可见？答案

【问题标题】：Invisible to Transparent HTML/CSS Button?对透明 HTML/CSS 按钮不可见？
【发布时间】：2015-06-02 22:26:04
【问题描述】：

好的。所以我正在尝试重新创建我发现的这个非常酷的按钮。这个例子在http://gyazo.com/cafe378e8340d71c341b7c52857b2689 看看它是如何最初是不可见的，但现在它有点褪色了？到目前为止，这是我的版本。 -> 请尝试帮助解决这个问题！

HTML

<button>METRO 5.2</button>

CSS

body {
  background-image: url(http://p1.pichost.me/i/39/1624496.jpg);
  text-align: center;
}
button {
  border: 1;
  background: transparent;
  border-style: solid;
  border-color: #FFF;
  border-radius: 1px;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 15px;
  padding-bottom: 15px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  outline: 0;
  transition: all .2s ease-in-out;
  color: #FFF
}

button:hover {
  padding-left: 80px;
  padding-right: 80px;
  background-color: #bdc3c7;
  background: 0.4;
}

【问题讨论】：

codepen.io/iKornn/pen/JdWbZW
jsfiddle.net/yak613/7t9rndh9
@Yak613 对您的解决方案做出回答，以便 iKornn 将其标记为正确，因此人们不再来这里！

标签： javascript jquery html ios css

【解决方案1】：

index.html:

<button>METRO 5.2</button>

还有你的 CSS .. Style.css：

body {
  background-image: url(http://p1.pichost.me/i/39/1624496.jpg);
  text-align: center;
}
button {
  border: 1;
  background: rgba(189, 195, 199, .1);
  border-style: solid;
  border-color: #FFF;
  border-radius: 1px;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 15px;
  padding-bottom: 15px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  outline: 0;
  transition: all .2s ease-in-out;
  color: #FFF
}

button:hover {
  padding-left: 80px;
  padding-right: 80px;
  background-color: rgba(189, 195, 199, 1);
  background: 0.4;
}

【讨论】：

【解决方案2】：

HTML：

<button>METRO 5.2</button>

CSS：

body {
  background-image: url(http://p1.pichost.me/i/39/1624496.jpg);
  text-align: center;
}
button {
  border: 1 solid #FFF;
  background: rgba(189, 195, 199, .1);
  border-radius: 1px;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 15px;
  padding-bottom: 15px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  outline: 0;
  transition: all .2s ease-in-out;
  color: #FFF
}

button:hover {
  padding-left: 80px;
  padding-right: 80px;
  background-color: rgba(189, 195, 199, 1);
  background: 0.4;
}

【讨论】：