Question

我在为Bootstrap按钮创建叠加样式时遇到了问题。

我有以下按钮代码：

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

如何为按钮创建叠加层

2 个答案: