.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: 9;
  transition: 0.5s;
}
.z-btn1 > span:nth-of-type(1) {
  color: #fff;
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 37px;
  line-height: 37px;
  background: rgba(255, 102, 0, 0.7);
}
.z-btn1 > span:nth-of-type(2) {
  color: #fff;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
}
.z-btn1:hover {
  color: #555;
}
.z-btn1:hover > span:nth-of-type(2) {
   top: 50%;
 }
.z-btn1:hover > span:nth-of-type(1) {
  top: 120%;
}

.z-btn1:before {
  cursor: pointer;
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0%;
  left: 0%;
  background: rgba(255, 102, 0, 0.7);
  transition: 0.5s;
  z-index: 99;
}
.z-btn1:hover:before {
  height: 100%;
}

.z-btn2 > span {
  color: #fff;
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.z-btn2 > a {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.z-btn2:hover {
  color: #555;
}
.z-btn2:hover > span {
  top: 70%;
}
.z-btn2:hover > a {
  top: 90%;
}
.z-btn2:before {
  cursor: pointer;
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0%;
  left: 0%;
  background: rgba(255, 102, 0, 0.6);
  transition: 0.5s;
  z-index: 99;
}
.z-btn2:hover:before {
  height: 100%;
}

.z-btn3 > span {
  position: absolute;
  top: 100%;
  left: 0%;
  transform: translate(-0%, -0%);
  /*transition: 0.5s;*/
  cursor: pointer;
}
.z-btn3:hover {
   color: #555;
 }
.z-btn3:hover > span {
  top: 0%;
}
.z-btn3:before {
  cursor: pointer;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0%;
  left: 0%;
  transition: 0.5s;
  z-index: 99;
}
.z-btn3:hover:before {
  height: 100%;
}

.z-btn9 > span {
  color: #fff;
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.z-btn9:hover {
  color: #555;
}
.z-btn9:hover > span {
  top: 50%;
}
.z-btn9:before {
  cursor: pointer;
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0%;
  left: 0%;
  background: rgba(255, 102, 0, 0.8);
  transition: 0.5s;
  z-index: 99;
}
.z-btn9:hover:before {
  height: 100%;
}