<a href="#" class="border-button"> Hover me </a>
<a href="#" class="border-button"> Hover me, also </a>
.border-button {
  @border-width: 10px;
  @border-width-half: @border-width / 2;
  
  border: solid @border-width @border;
  margin: 0.1em;

  transition: clip-path 0.6s linear;
  clip-path: polygon( ~"
    calc(0% + @{border-width-half}) 
    calc(0% + @{border-width-half}), 

    calc(100% - @{border-width-half}) 
    calc(0% + @{border-width-half}), 

    calc(100% - @{border-width-half}) 
    calc(100% - @{border-width-half}), 

    calc(0% + @{border-width-half}) 
    calc(100% - @{border-width-half})
    ");
}

.border-button:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
View Compiled
Run Pen

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.