如何爲按鈕創建疊加層

Question

我無法爲引導按鈕創建疊加層樣式。

我有以下按鈕代碼：

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

這就是我想要的按鈕的佈局和我已經實現了下面的CSS：

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

這使得上層覆蓋的整個容器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; 
} 

這是你在找什麼？

您需要將position: relative;添加到.btn，以便覆蓋absolute位置樣式本身相對於.btn。

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>