javascript - 透明なHTML / CSSボタンから見えない?

原文 javascript jquery html ios css

OK。だから私は私が見つけたこの本当にクールなボタンを再作成しようとしています。例はhttp://gyazo.com/cafe378e8340d71c341b7c52857b2689にあります。最初は非表示になっていますが、今は少し色あせています。これが私のバージョンです。 ->これを助けてみてください! <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;
}
答え
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;
}
関連記事

javascript - keypressイベントの入力フィールドにスペースを入れない

javascript - クリックしても、Jsonからのチェックボックスにアラートが表示されない

javascript - 1つのクラスへのCSS追加の疑似要素(前、後、+その他)

javascript - JSTreeからチェックIDを取得-Get_Checkedはノードを検出しますが、IDは検出しません

javascript - 個別のボタンのブートストラップのクリックでモーダル内のナビゲーションタブのアクティブクラスを変更しようとしています

javascript - 関数のパラメーターで既に参照されているグローバル変数を参照する方法は?

javascript - スライドショーにエフェクトを追加できません

javascript - 日付ピッカーの問題の発生

javascript - POSTでJQueryに配列を渡し、Flaskでそれを読み取る

javascript - rails4 link_toでポップアップボックスを開く方法