.wrap-tf-button {
  position: relative;
  z-index: 5;
}
.wrap-tf-button .tf-btn {
    position: relative;
    display: inline-block;
}

.wrap-tf-button .tf-btn i {
    display: inline-block;
}

.wrap-tf-button.slide-right .tf-btn:hover i {
    animation: toRightFromLeft .3s forwards;
}

.wrap-tf-button.slide-up .tf-btn:hover i {
    animation: toTopFromBottom .3s forwards;
}

.wrap-tf-button.slide-left .tf-btn:hover i {
    animation: toLeftFromRight .3s forwards;
}

.wrap-tf-button.slide-down .tf-btn:hover i {
    animation: toBottomFromTop .3s forwards;
}

  
  @-webkit-keyframes toRightFromLeft {
    49% {
      -webkit-transform: translate(100%); }
    50% {
      opacity: 0;
      -webkit-transform: translate(-100%); }
    51% {
      opacity: 1; } }
  
  @-moz-keyframes toRightFromLeft {
    49% {
      -moz-transform: translate(100%); }
    50% {
      opacity: 0;
      -moz-transform: translate(-100%); }
    51% {
      opacity: 1; } }
  
  @keyframes toRightFromLeft {
    49% {
      transform: translate(100%); }
    50% {
      opacity: 0;
      transform: translate(-100%); }
    51% {
      opacity: 1; } }
  
  @-webkit-keyframes toLeftFromRight {
    49% {
      -webkit-transform: translate(-100%); }
    50% {
      opacity: 0;
      -webkit-transform: translate(100%); }
    51% {
      opacity: 1; } }
  
  @-moz-keyframes toLeftFromRight {
    49% {
      -moz-transform: translate(-100%); }
    50% {
      opacity: 0;
      -moz-transform: translate(100%); }
    51% {
      opacity: 1; } }
  
  @keyframes toLeftFromRight {
    49% {
      transform: translate(-100%); }
    50% {
      opacity: 0;
      transform: translate(100%); }
    51% {
      opacity: 1; } }
  
  @-webkit-keyframes toTopFromBottom {
    49% {
      -webkit-transform: translateY(-100%); }
    50% {
      opacity: 0;
      -webkit-transform: translateY(100%); }
    51% {
      opacity: 1; } }
  
  @-moz-keyframes toTopFromBottom {
    49% {
      -moz-transform: translateY(-100%); }
    50% {
      opacity: 0;
      -moz-transform: translateY(100%); }
    51% {
      opacity: 1; } }
  
  @keyframes toTopFromBottom {
    49% {
      transform: translateY(-100%); }
    50% {
      opacity: 0;
      transform: translateY(100%); }
    51% {
      opacity: 1; } }
  
  @-webkit-keyframes toBottomFromTop {
    49% {
      -webkit-transform: translateY(100%); }
    50% {
      opacity: 0;
      -webkit-transform: translateY(-100%); }
    51% {
      opacity: 1; } }
  
  @-moz-keyframes toBottomFromTop {
    49% {
      -moz-transform: translateY(100%); }
    50% {
      opacity: 0;
      -moz-transform: translateY(-100%); }
    51% {
      opacity: 1; } }
  
  @keyframes toBottomFromTop {
    49% {
      transform: translateY(100%); }
    50% {
      opacity: 0;
      transform: translateY(-100%); }
    51% {
      opacity: 1; } }

.wrap-tf-button.style1 .tf-btn {
    border: 1px solid #171717;
    padding: 15px 24px;
    background: transparent;
    color: #171717;
    font-family: 'DM Sans';
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    text-transform: capitalize;
}

/* .wrap-tf-button.style1 .tf-btn:hover {
    background: #171717;
    color: #fff;
    border-color: #171717;
} */

/* style 2 */

.wrap-tf-button.style2 .tf-btn {
    border: 1px solid #171717;
    padding: 16px 24px;
    background: #fff;
    color: #171717;
    font-family: 'DM Sans';
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    text-transform: capitalize;
}

.wrap-tf-button.style2 .tf-btn::after {
    content: '';
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 100%;
    height: 100%;
    border: 1px solid #171717;
    z-index: -1;
    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;
    border-radius: inherit;

}

.wrap-tf-button.style2 .tf-btn:hover::after {
    right: 0px !important;
    bottom: 0px !important;
}

.wrap-tf-button .tf-btn i {
    margin-left: 7px;
}