JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="box">
    <p class="p">Click the button below to save your edits.</p>
    
    
  <label class="fakeBtn">
    Save
    <input type="checkbox" />
    <span class="fadeCover">
      <span></span>
    </span>
  </label>
</div>

CSS

.box {
  position: relative;
  z-index: 1; /*establish stacking context*/
  background: #eee;
}

.fakeBtn input {
  visibility: hidden;
  position: absolute;
}

.fadeCover,
.fadeCover > span {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.fadeCover {
  z-index: -1; /* put behind everything else in the box*/
  -webkit-animation: fade1 3s;
}

.fakeBtn input:checked + .fadeCover {
  -webkit-animation: fade2 3s;
}

.fadeCover > span {
  background: #eee;
  -webkit-animation: 0s cover 3s forwards;
}






/*ANIMATIONS*/
@-webkit-keyframes fade1 {
   0% { background: yellow; }
}

@-webkit-keyframes fade2 {
   0% { background: yellow; }
}

@-webkit-keyframes cover {
   100% { background: transparent; }
}