<button class="button">
  <span class="button-text">Hover me</span>
  <div class="fill-container another"></div>
  
</button>

  <a href="#" class="link split-underline w-inline-block"><div class="svcmaintext">We create work that hits hard, </div><div class="code-embed w-embed"></div></a>

.button {
  position: relative;
  padding: 24px 64px;
  margin-bottom:100px;
  border-radius: 100vw;
  background-color: transparent;
  font-family: "Playfair Display", serif;
  color: #fafafa;
  border: solid 1px rgba(250, 250, 250, 0.3);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 0.8); /* easeOutQuart */
  -webkit-mask-image: -webkit-radial-gradient(
    white,
    black
  ); /* force safari to respect border radius */
}

.button .button-text {
  position: relative;
  z-index: 2;
}
another. {
  margin-bottom: 100px;
}

.button .fill-container {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  padding-bottom: 100%;
  transform: translateY(-50%) rotate(180deg);
}

.button .fill-container::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  border-radius: 50%;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* easeOutQuart */
  transform: translateY(100%);
}

.button:hover {
  border-color: blue;
}

.button:hover .fill-container {
  transform: translateY(-50%) rotate(0);
}

.button:hover .fill-container::after {
  transform: translateY(0);
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #1a1a1a;
  color: #fafafa;
  box-sizing: border-box;
  padding: 32px;
}

h1 {
  margin-bottom: 64px;
  font-size: 64px;
  text-align: center;
  max-width: 600px;
}

.svcmaintext {
  color: white;
}

.split-underline {
  position: relative;
  display: inline-block;
}

.split-underline::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 5px; /* Adjust thickness of the underline */
  background-color: #5AD7CE; /* Custom color */
  transition: width 0.3s cubic-bezier(0.2, 1, 0.8, 1), transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
  transform: translateX(-50%);
}

.split-underline:hover::before {
  width: 100%; /* Expands the underline from the center to both sides */
}

.split-underline div {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}

.split-underline:hover div {
  transform: translate3d(0, -2px, 0);
}