Question

确定。因此，我试图重新创建我发现的这个非常酷的按钮。这个例子是http://gyazo.com/cafe378e8340d71c341b7c52857b2689看看它是如何首先看不见但现在它已经褪色了一点点？这是我到目前为止的版本。 - ＆GT;请尝试帮助！＆lt; 3

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

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

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

透明的HTML / CSS按钮不可见？

2 个答案: