.div {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  border: none;
  appearance: none;
  padding: 0;
}

.button {
  position: relative;
  z-index: 0;/* 疑似要素より上に配置 */
  background-image: linear-gradient(to left, #7f7fd5, #86a8e7, #91eae4);
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  font-size: 24px;
  padding: 16px 24px;
  border-radius: 30px;
  font-weight: bold;
}

.button:before,
.button:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 30px;
}

/* デフォルトのグラデーション */
.button:before {
  z-index: -1;
  transition: 0.5s;
  background-image: linear-gradient(to left, #7f7fd5, #86a8e7, #91eae4);
}
/* ホバー時のグラデーション */
.button:after {
  z-index: -2;
  background-image: linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4);
}
/* デフォルトのグラデーションを透明にする */
.button:hover:before {
  opacity: 0;
}