ボタンのオーバーレイを作成する方法

Question

ブートストラップボタンのオーバーレイスタイルの作成に問題があります。

I以下のボタンのコードを持っている：

.btn-overlay { 
    position: absolute; 
    padding: 0; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #ffffff; 
    opacity: 0.5; 
    transition: opacity .5s; 
} 

このオーバーレイがカバーします：私が好きなボタンのレイアウトだと、私は次のCSSを実装しました

<button id="btnTest" class="btn btn-primary"> 
    <span class="fa fa-certificate"></span> 
    &nbsp; 
    Test 
    <div class="btn-overlay"> 
     <i class="fa fa-refresh fa-spin"></i> 
    </div> 
</button> 

コンテナdiv全体（どのように起こっているのか分かりません）、ボタン全体をオーバーレイするだけではありません。

ここで間違っているのは何ですか？オーバーレイ部分を取得したら、fa-refreshアイコンを中央に置くことについて心配します。

Answer 1

フィドル：https://jsfiddle.net/t3ptae1o/

HTML

<button id="btnTest" class="btn btn-primary"> 
    <span class="fa fa-certificate"></span> 
    &nbsp; 
    Test 
    <span class="btn-overlay"> 
     <i class="fa fa-refresh fa-spin"></i> 
    </span> 
</button> 

CSS

.btn { 
    position: relative; 
} 
.btn-overlay { 
    position: absolute; 
    padding: 0; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #ffffff; 
    opacity: 0.5; 
    transition: opacity .5s; 
} 

が、これはあなたが探しているものですか？

あなたは.btnに対するabsolute位置のスタイル自体にオーバーレイするよう.btnにposition: relative;を追加する必要があります。

Answer 2

以下を参照してください。アイコンをCSSに移動しました。私はあなたがいつアニメーションを起こさせたいのか分からないので、今そこには何もありません。ここで読む

.button-container { 
 
    position: relative; 
 
} 
 

 
button:before { 
 
    font-family: FontAwesome; 
 
    content: "\f0a3" 
 
} 
 

 
button:after { 
 
    font-family: FontAwesome; 
 
    content: "\f021" 
 
} 
 

 
button>span { 
 
    margin: 0 0.7em; 
 
} 
 

 
.btn-overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: white; 
 
    opacity: 0.5; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="button-container"> 
 
    <button id="btnTest" class="btn btn-primary"><span>Test</span></button> 
 
    <span class="btn-overlay"></span> 
 
</div>