<div class="outer">
  <h1>Bottom to Top</h1> &nbsp;
  <div class="outer__button button__bottom-top">
    <div class="text">Button</div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap");

html {
  font-family: "Montserrat", sans-serif;
}

.outer {
  margin: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h1 {
  color: teal;
  text-transform: uppercase;
}

.outer__button {
  padding: 0.5em 1.5em;
  font-size: 2em;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  margin-top: -1em;
  border-radius: 100vh;
}
/* BOTTOM TO TOP */
.button__bottom-top {
  border: 2px solid black;
  background: linear-gradient(to top, #000 50%, #fff 51%);
  background-size: 100% 200%;
  border-radius: 50%;
  cursor: pointer;
  width: 300px;
  height: 300px;
  background-position: top;
  transition: all 5s ease-out;
}

.button__bottom-top.active {
  border: 2px solid limegreen;
  background-position: bottom;
  color: #fff;
}

const btn = document.querySelector(".button__bottom-top");

btn.addEventListener("click", (e) => e.currentTarget.classList.add("active"));