.border_animation{
    cursor:pointer;
      position:relative;
      padding:10px 20px;
      background:white;
      border-top-right-radius:10px;
      border-bottom-left-radius:10px;
      transition:all 1s;
      &:after,&:before{
        content:" ";
        width:10px;
        height:10px;
        position:absolute;
        border :0px solid #fff;
        transition:all 1s;
        }
      &:after{
        top:8px;
        left:8px;
        border-top:5px solid #020230;
        border-left:5px solid #020230;
      }
      &:before{
        bottom:8px;
        right:8px;
        border-bottom:5px solid #020230;
        border-right:5px solid #020230;
      }
      &:hover{
        border-top-right-radius:0px;
      border-bottom-left-radius:0px;
        /* background:rgba(0,0,0,.5);
        color:white; */
        &:before,&:after{
          
          width:97%;
          height:97.4%;
          /* border-color:white; */
        }
      }
    }







    .hover-underline-animation {
        display: inline-block;
        position: relative;
        color: #425feb;
      }
      
      .hover-underline-animation::after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #425feb;
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
      }
      
      .hover-underline-animation:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
      }