Cacher is the code snippet organizer for pro developers

body{
  background-color: rgba(0, 51, 102, 0.9);
  margin: 0;
  padding: 0;
  
}

.cta-button {
  margin: 0;
  padding: 0;
  //  height: 500px;
  //  overflow: hidden;
  width: 15em;
  //background-color: rgba(0, 51, 102, 0.9);
  text-align: center;
  font-size: 1.25em;
  font-family: sans-serif;
}
.cta-button a {
  text-decoration: none;
}
.cta-button ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.cta-button ul li {
  //margin: 50px auto;
  cursor: pointer;
}
.cta-button a ul li.div-svg span {
  text-shadow: 0px 0px 5px rgba(3, 3, 3, 0.8);
  text-decoration: none;
  color: #fcff3c;
  display: block;
  padding: 17px 0 0px 0;
  background-color: transparent;
  width: 300px;
  height: 45px;
  transition: all 0.1s ease-in-out;
}
.cta-button ul .div-svg {
  width: 300px;
  height: 75px;
  position: relative;
  overflow: hidden;
}
.cta-button ul .div-svg svg {
  position: absolute;
  top: 0;
  left: 0;
}
.cta-button ul .div-svg svg line {
  stroke-width: 3;
  stroke: #fcff3c;
  fill: none;
  -webkit-transition: -webkit-transform 0.8s ease-out;
  transition: transform 0.8s ease-out;
}
.cta-button ul .div-svg svg line.top,
.cta-button ul .div-svg svg line.bottom {
  stroke-dasharray: 300;
}
.cta-button ul .div-svg svg line.left,
.cta-button ul .div-svg svg line.right {
  stroke-dasharray: 75;
}
.cta-button ul .div-svg:hover svg line {
  stroke-width: 4;
}
.cta-button ul .div-svg:hover svg line.top {
  -webkit-transform: translateX(-600px);
  transform: translateX(-600px);
}
.cta-button ul .div-svg:hover svg line.bottom {
  -webkit-transform: translateX(600px);
  transform: translateX(600px);
}
.cta-button ul .div-svg:hover svg line.left {
  -webkit-transform: translateY(150px);
  transform: translateY(150px);
}
.cta-button ul .div-svg:hover svg line.right {
  -webkit-transform: translateY(-150px);
  transform: translateY(-150px);
}

<div class="cta-button"> 
  <a href="tel:1-408-555-5555">
  <ul>
    
      <li class="div-svg">
        <svg>
          <line x1="0" y1="0" x2="900" y2="0" class="top"></line>
          <line x1="0" y1="75" x2="0" y2="-150" class="left"></line>
          <line x1="300" y1="75" x2="-600" y2="75" class="bottom"></line>
          <line x1="300" y1="0" x2="300" y2="225" class="right"></line>
        </svg>
        <span>CALL US TODAY </br>757-752-4245</span>
      </li>
   
  </ul>
 </a>
</div>