JSFiddle - React, Tailwind, and code Playground

HTML

<div class="link">Link</div>

CSS

.link {
  display: block;
  position: absolute;
  bottom: 20%;
  padding: 0 25px;
  height: 42px;
  line-height: 42px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  background: red;
  color: white;
  transition: all 0.3s ease-in-out;
}

.link:hover {
  text-decoration: none;
  background: radial-gradient(98px 98px at center center, red 0%, #0088b5 100%);
}