<a href="#" class="fancy-btn">Hover me lad.</a> <br>
<a href="#" class="fancy-btn">Oh my Golly gosh.</a> <br>
<a href="#" class="fancy-btn">Jolly good show, it adjusts to content.</a> <br>



<a href="https://twitter.com/nodws" id="btn-twtr" target="_b">Follow me on Twitter</a>

html,body{
  height:100%;
}
body{
  text-align:center;
  margin-top:10vw;
  background:#222 url(//images.weserv.nl/?url=i.imgur.com/NrIDycX.jpg) no-repeat;
  background-size:cover;
  overflow:hidden
}
.fancy-btn{
  display:inline-block;
  position:relative;
  padding:10px 20px;
  border:2px solid #fda;
  color:#fda;
  font-family:'Dancing Script',serif;
  font-style:italic;
  font-size:30px;
  text-decoration:none;
  margin:20px auto;
  transition: color 0.4s
}
.fancy-btn:after{
  content:" ";
  border:2px solid rgba(0,0,0,0);
  display:inline-block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  transition:all 0.4s;
}
.fancy-btn:hover{
  color:#eee
}
.fancy-btn:hover:after{  
  border:2px solid #fda;
  width: calc(100% - 10px);
  height: calc(100% + 10px); 
}



/* follow me @nodws */
#btn-twtr{
  clear:both;
  color:#fff;
  border:2px solid;
  border-radius:3px;
  text-align:center;
  text-decoration:none;
  display:block;
  font-family:sans-serif;
  font-size:14px;
  width:13em;
  padding:5px 10px;
  font-weight:600;
  margin:90px auto;
  background:rgba(0,0,0,0.2);
  box-shadow:0 0 0px 3px rgba(0,0,0,0.2);
  opacity:0.6
}#btn-twtr:hover{color:#fff;opacity:1}

//no JS and no preprocessed CSS kiddy code