JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <a class="auth" href="#"><span class="t-s">Sign In</span></a>
</body>

CSS

a{
  text-decoration: none;
  color: #fff;
}
.auth{
  display: inline-block;
  text-transform: uppercase;
  background: #fff;
  color: #000;
  border: 2px solid #262626;
  padding: 8px;
  position: relative;
  overflow: hidden;
}
.auth:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  background: #ff003b;
  transition: .5s ease-in-out;
  z-index: 1;
}
.auth:hover:before{
  left: 0;
  transform: none;
}
.t-s{
  position: relative;
  color: #262626;
  transition: .5s ease-in-out;
  z-index: 1;
}
.auth:hover .t-s{
  color: #fff;
}