<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 25 -5" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>

<section>
  <div class="pagination">
    <ul class="dots">
      <li class="select">
        <div class="select-in"></div>
      </li>
      <li class="dot"></li>
      <li class="dot"></li>
      <li class="dot"></li>
      <br>
      <li class="dot"></li>
      <li class="dot"></li>
      <li class="dot"></li>
    </ul>
    <ul class="buttons">
      <li class="button"><button>
          <h1>ЗАБОТА <br>
            О ЛИЦЕ
          </h1>
          <p>FACIAL CARE</p>
        </button></li>
      <li class="button"><button>
          <h1>ЗАБОТА <br>
            О ЛИЦЕ
          </h1>
          <p>FACIAL CARE</p>
        </button></li>
      <li class="button"><button>
          <h1>ЗАБОТА <br>
            О ЛИЦЕ
          </h1>
          <p>FACIAL CARE</p>
        </button></li>
      <br>
      <li class="button"><button>
          <h1>ЗАБОТА <br>
            О ЛИЦЕ
          </h1>
          <p>FACIAL CARE</p>
        </button></li>
      <li class="button"><button>
          <h1>ЗАБОТА <br>
            О ЛИЦЕ
          </h1>
          <p>FACIAL CARE</p>
        </button></li>
      <li class="button"><button>
          <h1>ЗАБОТА <br>
            О ЛИЦЕ
          </h1>
          <p>FACIAL CARE</p>
        </button></li>
    </ul>
  </div>
</section>

section {
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  
}
.pagination ul {
  padding: 10px 30px;
  font-size: 0;
}
.pagination li {
  display: inline-block;
  margin: 30px;
  flex:25%;
  background: #b1d0cd;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  transition:1500ms;
}
.pagination li:hover{
  background: #f7e0d7;
}
.pagination li:hover button h1{
  color: #006c67;
}
.pagination li:hover button p{
  color: #706f6f;
}
.pagination .dots {
  position: absolute;
  z-index: 1;
  filter: url("#goo");
}
.pagination .dots .select {
  position: absolute;
  left: -20px;
  top: -10px;
  width: 200px;
  height: 200px;
  background: #f7e0d7;
}
.pagination .dots .dot {
  background: #f7e0d7;
  transform: scale(0.9);
}
.pagination .buttons {
  position: relative;
  z-index: 2;
}
.pagination .buttons .button button {
  width: 100%;
  height: 100%;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
}
.pagination .buttons .button button h1{
  font-family: sans-serif;
  transition:1s;
  font-size:28px;
}
.pagination .buttons .button button p{
  font-family: Roboto;
  transition:1s;
  font-size:22px;
}
<svg>
                <filter id="gooey">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
                    <feColorMatrix values="
                    1 0 0 0 0
                    0 1 0 0 0
                    0 0 1 0 0
                    0 0 0 20 -10
                    "/>
                </filter>
            </svg>

const buttons = document.querySelectorAll(".pagination button");
const select = document.querySelector(".pagination .select");

buttons.forEach((button) => {
  button.addEventListener("pointerenter", mouseEnter);
});

function mouseEnter(e) {
  const target = e.currentTarget;

  gsap.to(select, {
    duration: 0.5,
    x: target.offsetLeft,
    y: target.offsetTop - 10,
    ease: Elastic.easeOut.config(1, 1)
  });
}