JSFiddle - React, Tailwind, and code Playground

by Arjun Singh

HTML

<a href=# class="button">
  A Button
</a>

SCSS

*, *::after, *::before{
  box-sizing: border-box;
}

.button{
  --border-size: 2px;
  --border-radius: 2px;
  --border-color: orange;
  
  position: relative;
  
  display: inline-block;
  
  font-family: sans-serif;
  font-weight: bold;
  text-decoration: none;
  
  border: var(--border-size) solid rgba(0, 0, 0, 0.125);
  border-radius: var(--border-radius);
  padding: 16px;
  
  text-align: center;
  
  transition: all ease 0.5s;
  
  //Addition unrelated styling:
  
  background-color: tomato;
  color: white;
}

.button:hover{
  border-color: transparent;
  background-color: transparent;
  color: orange;
}

.button::before, .button::after{
  content: "";
  
  position: absolute;
  top: calc(-1 * var(--border-size));
  left: calc(-1 * var(--border-size));
  
  height: calc(100% + var(--border-size));
  width: calc(100% + var(--border-size));
  
  border-radius: var(--border-radius);
  
  pointer-events: none;
  
  transform: scale(0);
  
  transition: transform 1s ease;
  
}

.button::before{
  border-bottom: var(--border-size) solid var(--border-color);
  border-left: var(--border-size) solid var(--border-color);
  
  transform-origin: top right;
}

.button::after{
  border-top: var(--border-size) solid var(--border-color);
  border-right: var(--border-size) solid var(--border-color);
  
  transform-origin: bottom left;
}

.button:hover::before, .button:hover::after{
  transform: none;
}