<button class="btn">Hover Me</button>

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
}

body{
  background: #353b48;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn{
  width: 200px;
  height: 60px;
  background: none;
  border: 4px solid;
  color: #3498db;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 16px;
  position: relative;
}

.btn::before,.btn::after{
  content: "";
  position: absolute;
  width: 14px;
  height: 4px;
  background: #353b48;
  transform: skewX(50deg);
  transition: .4s linear;
}

.btn::before{
  top: -4px;
  left: 10%;
}

.btn::after{
  bottom: -4px;
  right: 10%;
}

.btn:hover::before{
  left: 80%;
}

.btn:hover::after{
  right: 80%;
}

/*
* https://www.darkcode.info/2019/12/button-with-awesome-hover-effects-using.html
*/