/* Button  Hover Effects */
a span.special {
    padding: 6px 12px;
    transition: .5s;
    position: relative;
}

a span.special:nth-child(1) {
    color: #fff;
    background: #20948B;
}
a span.special:nth-child(2) {
    color: #fff;
    background: #F52549;
}
a span.special:nth-child(1):before {
    content: attr(data-attr);
    position: absolute;
    top: 0;
    left: 0;
    background: #F52549;
  padding: 7px 13px;
    transition: 0.5S;
    transform-origin: top;
    transform: rotateX(90deg) translateY(-50%);
}
a:hover span.special:nth-child(1):before {
    transform: rotateX(0deg) translateY(0%);
} 
a span.special:nth-child(2):before {
    content: attr(data-attr);
    position: absolute;
    top: 0;
    left: 0;
    background: #20948B;
   padding: 7px 13px;
    transition: 0.5S;
    transform-origin: bottom;
    transform: rotateX(90deg) translateY(50%);
}
a:hover span.special:nth-child(2):before {
    transform: rotateX(0deg) translateY(0%);
} 
a  span.special:nth-child(1):after {
  content: attr(data-attr);
  padding: 7px 13px;
  position: absolute;
  top: 0;
  left: 0;
  background: #20948B;
  transform-origin: bottom;
  transform: rotateX(0deg) translateY(0%);
  transition: 0.5s;
}
a:hover span.special:nth-child(1):after {
  transform: rotateX(90deg) translateY(50%);
}
a span.special:nth-child(2):after {
    content: attr(data-attr);
    position: absolute;
    top: 0;
    left: 0;
    background: #F52549;
    padding: 7px 13px;
    transition: 0.5S;
    transform-origin: top;
    transform: rotateX(0deg) translateY(0%);
}
a:hover span.special:nth-child(2):after {
    transform: rotateX(90deg) translateY(-50%);
}