Untitled

<button class="button">
  Button
</button>
<style>
  body{
       background: #212121;
  }
  button {
padding: 15px 60px;
background: transparent;
border: 2px solid #6528F7;
font-size: 15px;
font-weight: bold;
font-family: Montserrat , sans-serif;
color: #ffffff;
border-radius: 6px;
cursor: pointer;
position: relative;
display: flex;
overflow: hidden;
transition: all 0.5s;
text-transform: uppercase;
}

button span {
transition: all 0.5s;
z-index: -1;
}

button::after,
button::before {
content: "";
position: absolute;
width: 0;
height: 100%;
background: #6528F7;
top: 0;
transform: skewX(35deg);
transition: all 0.5s;
z-index: -1;
}

button::after {
left: -20px;
}

button::before {
right: -20px;
}

button:hover::after {
width: 50%;
left: 0;
}

button:hover::before {
width: 50%;
right: 0;
}

</style>