<div class="container">
  <div class="contents">
    <p class="btn"><a href="#">Break</a></p>
  </div>
</div>
* {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
}

.container {
  position: relative;
  height: 100vh;
}

.contents {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 200px;
  height: 40px;
  margin: auto;
}

.btn {
  position: relative;
  width: 200px;
  height: 40px;
  margin: 0 auto;
  line-height: 40px;
  text-align: center;
}

.btn::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  width: 1px;
  height: 80px;
  margin: auto;
  background: #fff;
  visibility: hidden;
  opacity: 0;
}

.btn:hover::before {
  animation: sword .5s;
}

@keyframes sword {
  0% {top: -100px; visibility: hidden; opacity: 0;}
  20% {visibility: visible; opacity: 1;}
  100% {top: 100px; visibility: hidden; opacity: 0;}
}

.btn a {
  display: block;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}

.btn a::before,
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 38px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transition: all .5s 0s;
}

.btn a::before {
  left: 0;
  border-left: 1px solid #fff;
}

.btn a::after {
  right: 0;
  border-right: 1px solid #fff;
}

.btn a:hover::before {
  left: -20px;
  transition: all .5s .2s;
  opacity: 0;
}

.btn a:hover::after {
  right: -20px;
  transition: all .5s .2s;
  opacity: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.