.ud-btn-wrapper{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  height:auto;
}
.ud-btn-anm{
  background: linear-gradient(to left top, #898989ac 10%, #8989899e 10%);
  border-style: none;
  color:rgb(233, 233, 233);
  font-size: 20px;
  font-weight: 400;
  outline: none;
  cursor: pointer;
  position: relative;
  padding: 10px 30px;
  overflow: hidden;
  transition: all .2s;
  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
}
.ud-btn-anm span{
  position: absolute;
  display: block;
}
.ud-btn-anm span:nth-child(1){
  height: 3px;
  width:200px;
  top:0px;
  left:-200px;
  background: linear-gradient(to right, rgba(0,0,0,0), #f6e58d);
  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;
  }
}
.ud-btn-anm span:nth-child(2){
  height: 70px;
  width: 3px;
  top:-70px;
  right:0px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), #f6e58d);
  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;
  }
}
.ud-btn-anm span:nth-child(3){
  height:3px;
  width:200px;
  right:-200px;
  bottom: 0px;
  background: linear-gradient(to left, rgba(0,0,0,0), #f6e58d);
  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;
  }
}

.ud-btn-anm span:nth-child(4){
  height:70px;
  width:3px;
  bottom:-70px;
  left:0px;
  background: linear-gradient(to top, rgba(0,0,0,0), #f6e58d);
  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;
  }
}

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