<div class="cloned-1">1. Hover me</div>
<div class="cloned-2">2. Hover me</div>
<div class="cloned-3">3. Hover me</div>
<div class="cloned-4">4. Hover me</div>
<div class="cloned-5">5. Hover me</div>
<div class="cloned-6">6. Hover me</div>
<div class="cloned-7">7. Hover me</div>
<div class="cloned-8">8. Hover me</div>

.cloned-1 {
  padding: 10px;
  transition: .2s .4s;
}
.cloned-1:hover {
  color: #fff;
  background: #542437;
  transition: .2s;
}

.cloned-1:before,
.cloned-1:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #D95B43;
  opacity: 0;
  transition: .2s .2s;
}
.cloned-1:before {
  background: #ECD078;
  transition-delay: 0s;
}
.cloned-1:hover:before,
.cloned-1:hover:after {
  transform: translate(-10px,10px);
  opacity: 1; 
}
.cloned-1:hover:before {
  transform: translate(-20px,20px);
  transition-delay: .4s;
}


.cloned-2 {
  padding: 10px;
  transition: .2s .4s;
}
.cloned-2:hover {
  color: #fff;
  background: #542437;
  transition: .2s;
}

.cloned-2:before,
.cloned-2:after {
  content: "";
  position: absolute;
  inset: 0 10px;
  z-index: -1;
  background: #D95B43;
  opacity: 0;
  transition: .2s .2s;
}
.cloned-2:before {
  inset: 0 20px;
  background: #ECD078;
  transition-delay: 0s;
}
.cloned-2:hover:before,
.cloned-2:hover:after {
  transform: translateY(10px);
  opacity: 1; 
}
.cloned-2:hover:before {
  transform: translateY(20px);
  transition-delay: .4s;
}

.cloned-3 {
  padding: 10px;
  transition: .2s .4s;
}
.cloned-3:hover {
  color: #fff;
  background: #542437;
  transition: .2s;
}

.cloned-3:before,
.cloned-3:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #D95B43;
  opacity: 0;
  transition: .2s .2s;
}
.cloned-3:before {
  background: #ECD078;
  transition-delay: 0s;
}
.cloned-3:hover:before,
.cloned-3:hover:after {
  transform: rotate(-8deg);
  opacity: 1; 
}
.cloned-3:hover:before {
  transform: rotate(-16deg);
  transition-delay: .4s;
}

.cloned-4 {
  padding: 10px;
  transition: .2s .2s;
}
.cloned-4:hover {
  color: #fff;
  background: #542437;
  transition: .2s;
}

.cloned-4:before,
.cloned-4:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #D95B43;
  opacity: 0;
  transition: .2s ;
}
.cloned-4:before {
  background: #ECD078;
}
.cloned-4:hover:before,
.cloned-4:hover:after {
  transform: rotate(-10deg);
  opacity: 1; 
  transition: .2s .2s;
}
.cloned-4:hover:before {
  transform: rotate(10deg);
}


.cloned-5 {
  padding: 10px;
  transition: .2s;
}
.cloned-5:hover {
  color: #fff;
  background: #542437;
}

.cloned-5:before,
.cloned-5:after {
  content: "";
  position: absolute;
  inset: 0 5px;
  z-index: -1;
  background: #D95B43;
  opacity: 0;
}
.cloned-5:before {
  inset: 0 10px;
  background: #ECD078;
}
.cloned-5:hover:before,
.cloned-5:hover:after {
  transform: translateY(0.1px);
  opacity: 1; 
  transition: transform .5s .2s cubic-bezier(0.5,500,0.5,-500),opacity 0s .2s;
}
.cloned-5:hover:before {
  transform: translateY(0.2px);
}

.cloned-6 {
  padding: 10px;
  transition: .2s;
}
.cloned-6:hover {
  color: #fff;
  background: #542437;
}

.cloned-6:before,
.cloned-6:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #D95B43;
  opacity: 0;
  transform: translate(100px,-100px);
}
.cloned-6:before {
  background: #ECD078;
  transform: translate(-100px,100px);
}
.cloned-6:hover:before,
.cloned-6:hover:after {
  transform: translateY(0);
  opacity: 1; 
  transition: transform .5s .2s cubic-bezier(0,.6,.8,1.9),opacity .3s .2s;
}

.cloned-7 {
  padding: 10px;
  transition: .2s;
}
.cloned-7:hover {
  color: #fff;
  background: #542437;
}

.cloned-7:before,
.cloned-7:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #D95B43;
  opacity: 0;
}
.cloned-7:before {
  background: #ECD078;
}
.cloned-7:hover:before,
.cloned-7:hover:after {
  inset: -0.1px;
  opacity: 1; 
  transition: inset .5s .2s cubic-bezier(0.2,250,0.8,250),opacity 0s .2s;
}
.cloned-7:hover:before {
  inset: -0.2px;
  transition-delay: .3s,.2s;
}

.cloned-8 {
  padding: 10px;
  transition: .3s .3s;
}
.cloned-8:hover {
  color: #fff;
  transition: .3s;
  background: #542437;
}
.cloned-8:before,
.cloned-8:after {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  z-index: -1;
  box-shadow: 
    0 0 #D95B43,
    0 0 #ECD078;
  opacity: 0;
  transition:0.3s 0.3s,box-shadow .3s;
}
.cloned-8:after {
  transform-origin: right;
  transform: rotate(180deg);
}
.cloned-8:hover:before,
.cloned-8:hover:after {
  box-shadow: 
    -10px 10px #D95B43,
    -20px 20px #ECD078;
  opacity: 1;
  transition:0.3s 0.3s,opacity .3s;
}

[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
  position: relative;
}
[class]:before,
[class]:after {
  pointer-events: none;
}

body {
  text-align:center;
  overflow:hidden;
}