<button><span>I'm a button</span></button>

body {
  display: grid;
  place-content: center;
  margin: 0;
  min-height: 100vh;
  background-color: hsl(222, 99%, 15%);
}

button {
  padding: 0.5em 1em 0.6em 1em;
  position: relative;
  border: none;
  border-radius: 0.5em;
  overflow: hidden;
  background-color: hsl(222, 99%, 38%);
  font-size: 1.2rem;
  color: #ffffff;
}

button span {
  position: relative;
  z-index: 1;
}

button:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: hsl(222, 99%, 45%);
  clip-path: inset(50%);
  transition: clip-path 0.2s ease-out;
}

button:hover:after {
  clip-path: inset(0);
}