<a href="#" class="border-button"> Hover me </a>
<a href="#" class="border-button"> Hover me, also </a>
.border-button {
  position: relative;
  margin: 0.5em;
  border: solid 5px transparent;
  background: fade(@background,50%);
}

.border-button:after {
  content: '';
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border: solid 10px @border;
  margin: -15px;
  z-index: -1;
  transition: transform 0.6s linear;
  transform: scale(0.97, 0.93);
}

.border-button:hover::after { transform: scale(1,1); }
View Compiled
Run Pen

External CSS

  1. https://codepen.io/shshaw/pen/f7548069c326e3c49d374144db9cb662

External JavaScript

This Pen doesn't use any external JavaScript resources.