@border-width: 10px;
@border-width-half: @border-width / 2;

.border-button {
  margin: 0.1em;
  border: solid @border-width transparent;
  
  background-origin: border-box;
  background-repeat: no-repeat;
  
  background-size: 
    calc(~"100% - @{border-width}") @border-width-half,
    @border-width-half calc(~"100% - @{border-width}");
  
  background-position: 
    @border-width-half @border-width-half,
    calc(~"100% - @{border-width-half}") @border-width-half,
    @border-width-half calc(~"100% - @{border-width-half}"),
    @border-width-half @border-width-half;
  
  background-image: 
    linear-gradient(0deg, @border, @border),
    linear-gradient(0deg, @border, @border),
    linear-gradient(0deg, @border, @border),
    linear-gradient(0deg, @border, @border);
  
  transition: all 0.6s linear;
  transition-property: background-size, background-position;

}

.border-button:hover {
  
  background-size: 
    100% @border-width,
    @border-width 100%;
  
  background-position: 0 0, 100% 0, 0 100%, 0 0;
}