JSFiddle - React, Tailwind, and code Playground

HTML

<a class="newb" href="//google.com" target="_blank">
new button
</a>

SCSS

.newb {
  display: block;
  text-decoration: none;
  cursor:pointer;
  position: relative;
  border: 2px solid #37a3eb;
  background:transparent;
  color: #37a3eb;
  font-family: arial, sans-serif;
  height: 50px;
  width: 130px;
  line-height: 46px;
  text-align: center;
  box-sizing: border-box;
  font-weight: bold;
  border-radius: 5px;
  transition: border-color 300ms ease, color 300ms ease;
  &:after {
    position: absolute;
    display: block;
    content: '';
    margin: -2px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #37a3eb;
    opacity: 0;
    transition: transform 300ms step-end, opacity 300ms ease;
    transform: scale(0.6);
    border-radius: 5px;
    border: 4px solid #37a3eb;
    box-sizing: content-box;
    z-index: -1;
  }
  &:hover {
    border-color: transparent;
    color: white;
    &:after {
      transition: transform 300ms ease, opacity 300ms ease;
      transform: scale(1);
      opacity: 1;
    }
  }
}