<div id="wrapper">
  <a id="btn-outline" href="http://www.aydev.net46.net" target="_blank">
  <svg height="40" width="210" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" height="40" width="210"></rect>
  </svg>
  <div class="text">AYDEV</div>
 </a>
</div>

body {
background: #000;
color:#fff;
font-family: Arial;
text-align: center;
font-size: 62.5%;
line-height: 150%;
height: 100%;
line-height: 1.5;
}

a { text-decoration: none;}

#wrapper { 
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 30%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


#btn-outline {
   margin: 30px auto 0;
  width: 210px;
  height: 40px;
  display: block;
}

#btn-outline .shape {
  stroke-dasharray: 100 310;
  stroke-dashoffset: -304;
  stroke-width: 5px;
  fill: transparent;
  stroke: #fff;
  -webkit-transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
  -ms-transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}

#btn-outline .text { 
  top: -34px;
  position: relative;
  color: #fff;
  font-size: 1.5em;
  letter-spacing: 4px;
  margin-right: -4px;
}

 #btn-outline:hover .shape {
   stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 550;
}

.no-svg #btn-outline {
   color: #fff;
  font-size: 1.7em;
  line-height: 40px;
  letter-spacing: 4px;
  text-indent: 4px;
  border: 2px solid #fff;
}