如何为按钮创建叠加层

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>