.btn-1 {
  width: 150px;
  height: 50px;
  border: none;
  color: white;
  background-color: rgb(255, 0, 68);
  border-radius: 100px;
  box-shadow: inset 0 0 0 0 grey;
  transition: ease-out 0.3s;
  font-size: 1rem;
  outline: none;
}

.btn-1:hover {
  box-shadow: inset 300px 0 0 0 grey;
  cursor: pointer;
  color: #000;
}

/* .btn-2 {
  width: 300px;
  height: 100px;
  border: none;
  color: black;
  border-radius: 4px;
  transition: ease-out 0.3s;
  font-size: 2rem;
  outline: none;
  border: 3px solid #42FBF2;
  position: relative;
  z-index: 1;
}

.btn-2: hover {
  color: black;
  cursor: pointer;
}

.btn-2:before {
  transition: 0.5s all ease;
  position: absolute;
  color: black;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: "";
  background-color: #42FBF2;
}

.btn-2:hover:before {
  transition: 0.5 all ease;
  left: 0;
  color: black;
  right: 0;
  opacity: 1;
} */