<div>
  <a class="button">
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="50" x="0" y="0">
      <path d="M175,50H25C11.2,50,0,38.8,0,25v0C0,11.2,11.2,0,25,0h150c13.7,0,25,11.2,25,25v0
  C200,38.8,188.8,50,175,50z" class="path" fill="transparent" stroke="#ffffff"/>
    </svg>
    <p>View</p>
  </a>
</div>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>Works in Chrome, Firefox and Safari.</p>

@import url(https://fonts.googleapis.com/css?family=Oswald:300);

body{background-color:#000;margin:50px;font-family: 'Oswald', sans-serif;text-transform: uppercase;color:#fff;}

div {
  width: 200px;
  margin:0 auto;
}

p{text-align:center;}

.button {
  width: 100%;
  height: 50px;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: block;
  line-height:1.1;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  border-radius:25px;
  z-index:1;
}

path {
  stroke-width: 2;
  stroke: #fff;
  fill: none;
  stroke-dasharray: 460;
  -webkit-transition: -webkit-transform 1s linear;
  -moz-transition: -moz-transform 1s linear;
  transition: transform 1s linear;
}

.button:hover {
  cursor: pointer;
}

svg:hover path {
    animation: dash 2s reverse cubic-bezier(0.45, 0.03, 0.51, 0.95) 0s infinite; 
    -webkit-animation: dash 2s reverse cubic-bezier(0.45, 0.03, 0.51, 0.95) 0s infinite;
    -moz-animation: dash 2s reverse cubic-bezier(0.45, 0.03, 0.51, 0.95) 0s infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;}

@-webkit-keyframes dash{
    to {
      fill: transparent;
      stroke: #ffffff;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dashoffset: 600;
      stroke-dasharray: 600 0;
      }
  }
@keyframes dash{
    to {
      fill: transparent;
      stroke: #ffffff;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dashoffset: 600;
      stroke-dasharray: 600 0;
      }
  }
@-moz-keyframes dash{
    to {
      fill: transparent;
      stroke: #ffffff;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dashoffset: 600;
      stroke-dasharray: 600 0;
      }
  }