Fade on save. Pure css

by joplomacedo

HTML

<div id="box1" class="box box1">
  <div id="box2" class="box box2">
    <p class="p">Click the button below to save your edits.</p>
    
    <a href="#box1" class="btn btn1">Save</a>
    <a href="#box2" class="btn btn2">Save</a>
  </div>
</div>

CSS

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

.box1 {
  margin: 3em auto;
  width: 300px;
  background: #ddd;
}

.btn {
  display: inline-block;
  border: 1px solid black;
  background: #eee;
  color: #444;
  text-decoration: none;
}

.box1:target,
.box2:target {
  -webkit-animation: bgFade 3s;
}

.btn2,
.box1:target .btn1 {
  display: none;
}

.box1:target .btn2 {
  display: inline-block;
}