.z-btn {
  position: relative;
  overflow: hidden;
}

.z-btn a {
  position: relative;
  z-index: 999;
  transition: 0.5s;
}

.z-btn span {
  position: relative;
  z-index: 999;
  transition: 0.5s;
  display: block;
}

.z-btn img {
  position: relative;
  z-index: 999;
  transition: 0.5s;
}

/* .z-btn1:hover {
  color: #FFFFFF;
} */
.z-btn1:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /*background: #E3524E;*/
  background-image: linear-gradient(to right, #D6000F 2%, #E3524E 0);
  transition: 0.5s;
}

/* .z-btn1:hover:before {
  width: 100%;
}
.z-btn2:hover {
  color: #555;
} */
.z-btn2:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  transition: 0.5s;
}

/* .z-btn2:hover:before {
  width: 100%;
}
.z-btn3:hover {
  color: #555;
} */
.z-btn3:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  transition: 0.5s;
}

/* .z-btn3:hover:before {
  width: 50%;
} */
.z-btn3:after {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  transition: 0.5s;
}

/* .z-btn3:hover:after {
  width: 50%;
}

.z-btn4:hover {
  color: #555;
} */

.z-btn4:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn4:hover:before {
  height: 50%;
}

.z-btn5:hover {
  color: #555;
} */

.z-btn5:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* .z-btn5:hover:before {
  height: 100%;
}

.z-btn6:hover {
  color: #555;
} */

.z-btn6:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* .z-btn6:hover:before {
  height: 100%;
} */

.z-btn6:after {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* .z-btn6:hover:after {
  height: 100%;
}

.z-btn7:hover {
  color: #555;
} */

.z-btn7:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 0%;
  left: 0%;
  background: #fff;
  transition: 0.5s;
}

/* .z-btn7:hover:before {
  height: 100%;
}

.z-btn8:hover {
  color: #555;
} */

.z-btn8:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0%;
  left: 0%;
  background: #fff;
  transition: 0.5s;
}

/* .z-btn8:hover:before {
  height: 100%;
} */

.z-btn9>span {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* .z-btn9:hover {
  color: #555;
}

.z-btn9:hover>span {
  top: 50%;
} */

.z-btn9:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0%;
  left: 0%;
  background: #fff;
  transition: 0.5s;
}

/* .z-btn9:hover:before {
  height: 100%;
} */

.z-btn10>span {
  position: absolute;
  top: -120%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* .z-btn10:hover {
  color: #555;
}

.z-btn10:hover>span {
  top: 50%;
} */

.z-btn10:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 0%;
  left: 0%;
  background: #fff;
  transition: 0.5s;
}

/* .z-btn10:hover:before {
  height: 100%;
} */

.z-btn11>span:nth-child(1) {
  position: absolute;
  top: -20%;
  left: 45%;
  transform: translate(-50%, -50%);
}

.z-btn11>span:nth-child(2) {
  position: absolute;
  top: 120%;
  left: 55%;
  transform: translate(-50%, -50%);
}

/* .z-btn11:hover {
  color: #555;
}

.z-btn11:hover>span:nth-child(1) {
  top: 50%;
}

.z-btn11:hover>span:nth-child(2) {
  top: 50%;
} */

.z-btn11:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn11:hover:before {
  height: 50%;
} */

.z-btn12>span:nth-child(1) {
  position: absolute;
  top: 50%;
  left: -120%;
  transform: translate(-50%, -50%);
}

.z-btn12>span:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 120%;
  transform: translate(-50%, -50%);
}

/* 
.z-btn12:hover {
  color: #555;
}

.z-btn12:hover>span:nth-child(1) {
  left: 45%;
}

.z-btn12:hover>span:nth-child(2) {
  left: 55%;
} */

.z-btn12:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn12:hover:before {
  height: 50%;
}

.z-btn13:hover {
  color: #fff;
} */

.z-btn13:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn13:hover:before {
  height: 50%;
} */

.z-btn13:after {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn13:hover:after {
  height: 50%;
}

.z-btn14:hover {
  color: #555;
} */

.z-btn14:before {
  content: "";
  width: 50%;
  height: 0%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn14:hover:before {
  width: 100%;
  height: 100%;
}

.z-btn15:hover {
  color: #555;
} */

.z-btn15:before {
  content: "";
  width: 0%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn15:hover:before {
  width: 100%;
  height: 100%;
}

.z-btn16:hover {
  color: #555;
} */

.z-btn16:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn16:hover:before {
  width: 100%;
}

.z-btn17:hover {
  color: #555;
} */

.z-btn17:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn17:hover:before {
  width: 50%;
}

.z-btn18:hover {
  color: #555;
} */

.z-btn18:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: -50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn18:hover:before {
  left: 0%;
} */

.z-btn18:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  right: -150%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn18:hover:after {
  right: -100%;
}

.z-btn19:hover {
  color: #fff;
} */

.z-btn19:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: -50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn19:hover:before {
  left: -25%;
} */

.z-btn19:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  right: -150%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}

/* 
.z-btn19:hover:after {
  right: -125%;
} */