<div class="data-container">

  
<span class="btn">Hover Me </span>
</div>

body{
  margin:0;
  padding:0;
}

.btn{

cursor:pointer;
  position:relative;
  padding:10px 20px;
  background:white;
  font-size:28px;
  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:-1px;
    left:-1px;
    border-top:5px solid black;
    border-left:5px solid black;
  }
  &:before{
    bottom:-1px;
    right:-1px;
    border-bottom:5px solid black;
    border-right:5px solid black;
  }
  &:hover{
    border-top-right-radius:0px;
  border-bottom-left-radius:0px;
    // background:rgba(0,0,0,.5);
    // color:white;
    &:before,&:after{
      
      width:100%;
      height:100%;
      // border-color:white;
    }
  }
}

.data-container{
  background:#ffebee;
  height:100vh;
  scale:2; // added just to get good view on preview
  display:flex;
  justify-content:center;
  align-items:center;
}