How to create an overlay for a button

Question

I'm having trouble creating an overlay style for a Bootstrap button.

I have the following button code:

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

That's the layout of the button I'd like and I've implemented the following CSS:

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

This make the overlay cover the entire container div (not sure how that's happening) and not just overlaying the entire button.

Any idea what I'm doing wrong here? Once I get the overlay part I'll worry about centering the fa-refresh icon.

Read here: https://stackoverflow.com/questions/15885444/why-cant-a-button-element-contain-a-div You can't put a div tag inside a button tag. — Scott, Jun 18 '17 at 14:38

Yug Kapoor · Accepted Answer · 2017-06-18T14:55:57.693

Fiddle: 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;
}

Is this what you are looking for?

You need to add position: relative; to the .btn so that the overlay with absolute position styles itself relative to the .btn.

score 0 · Answer 2 · answered Jun 18 '17 at 15:09

Please see below. I have move the icons to the CSS. I'm not sure when you want the animation to happen, so nothing is in there now.

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

How to create an overlay for a button

2 Answers2