.btnStyle1{
  cursor: pointer;
  position: relative;
  padding: 10px 20px;
  background: var(--btn-color);
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
  transition: all 1s;
}

.btnStyle1::after,
.btnStyle1::before {
  content: " ";
  width: 10px;
  height: 10px;
  position: absolute;
  border: 0px solid #fff;
  transition: all 1s;
}

.btnStyle1::after {
  top: -1px;
  left: -1px;
  border-top: 5px solid var(--btn-border-color);
  border-left: 5px solid var(--btn-border-color);
}

.btnStyle1::before {
  bottom: -1px;
  right: -1px;
  border-bottom: 5px solid var(--btn-border-color);
  border-right: 5px solid var(--btn-border-color);
}

.btnStyle1:hover {
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color: var(--secondary);
}

.btnStyle1:hover::before,
.btnStyle1:hover::after {
  width: 100%;
  height: 100%;
}


/* ******************************************************************* */

.btnStyle2{
  background: linear-gradient(to left top, var(--btn-color) 40%, var(--secondary) 80%);
  border-style: none;
  color:#fff;
  letter-spacing: 3px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  position: relative;
  padding: 15px 30px;
  overflow: hidden;
  transition: all .5s;
  border-radius: 5px;
  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
}
.btnStyle2 span{
  position: absolute;
  display: block;
}
.btnStyle2 span:nth-child(1){
  height: 3px;
  width:200px;
  top:0px;
  left:-200px;
  background: linear-gradient(to right, rgba(0,0,0,0), var(--btn-border-color));
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
  animation: span1 2s linear infinite;
  animation-delay: 1s;
}

@keyframes span1{
  0%{
      left:-200px
  }
  100%{
      left:200px;
  }
}
.btnStyle2 span:nth-child(2){
  height: 70px;
  width: 3px;
  top:-70px;
  right:0px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--btn-border-color));
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
  animation: span2 2s linear infinite;
  animation-delay: 2s;
}
@keyframes span2{
  0%{
      top:-70px;
  }
  100%{
      top:70px;
  }
}
.btnStyle2 span:nth-child(3){
  height:3px;
  width:200px;
  right:-200px;
  bottom: 0px;
  background: linear-gradient(to left, rgba(0,0,0,0), var(--btn-border-color));
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
  animation: span3 2s linear infinite;
  animation-delay: 3s;
}
@keyframes span3{
  0%{
      right:-200px;
  }
  100%{
      right: 200px;
  }
}

.btnStyle2 span:nth-child(4){
  height:70px;
  width:3px;
  bottom:-70px;
  left:0px;
  background: linear-gradient(to top, rgba(0,0,0,0), var(--btn-border-color));
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
  animation: span4 2s linear infinite;
  animation-delay: 4s;
}
@keyframes span4{
  0%{
      bottom: -70px;
  }
  100%{
      bottom:70px;
  }
}

.btnStyle2:hover{
  transition: all .5s;
  transform: rotate(-3deg) scale(1.1);
  box-shadow: 0px 3px 5px rgba(0,0,0,.4);
}
.btnStyle2:hover span{
  animation-play-state: paused;
}


/* ********************* */

.btnStyle3{
  background: transparent;
  border-style: none;
  color:#fff;
  letter-spacing: 3px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  position: relative;
  padding: 15px 30px;
  overflow: hidden;
  transition: all .5s;
  border-radius: 5px;
  box-shadow: 0px 1px 2px rgba(255, 255, 255, 0.596);
}
.btnStyle3 span{
  position: absolute;
  display: block;
}
.btnStyle3 span:nth-child(1){
  height: 3px;
  width:200px;
  top:0px;
  left:-200px;
  background: linear-gradient(to right, rgba(0,0,0,0), var(--btn-border-color));
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
  animation: span1 2s linear infinite;
  animation-delay: 1s;
}

@keyframes span1{
  0%{
      left:-200px
  }
  100%{
      left:200px;
  }
}
.btnStyle3 span:nth-child(2){
  height: 70px;
  width: 3px;
  top:-70px;
  right:0px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--btn-border-color));
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
  animation: span2 2s linear infinite;
  animation-delay: 2s;
}
@keyframes span2{
  0%{
      top:-70px;
  }
  100%{
      top:70px;
  }
}
.btnStyle3 span:nth-child(3){
  height:3px;
  width:200px;
  right:-200px;
  bottom: 0px;
  background: linear-gradient(to left, rgba(0,0,0,0), var(--btn-border-color));
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
  animation: span3 2s linear infinite;
  animation-delay: 3s;
}
@keyframes span3{
  0%{
      right:-200px;
  }
  100%{
      right: 200px;
  }
}

.btnStyle3 span:nth-child(4){
  height:70px;
  width:3px;
  bottom:-70px;
  left:0px;
  background: linear-gradient(to top, rgba(0,0,0,0), var(--btn-border-color));
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
  animation: span4 2s linear infinite;
  animation-delay: 4s;
}
@keyframes span4{
  0%{
      bottom: -70px;
  }
  100%{
      bottom:70px;
  }
}

.btnStyle3:hover{
  transition: all .5s;
  transform: rotate(-3deg) scale(1.1);
  box-shadow: 0px 3px 5px rgba(0,0,0,.4);
}
.btnStyle3:hover span{
  animation-play-state: paused;
}