<div class="btn"><a href="">Button</a></div>
<div class="cursor"></div>
<div class="follower"></div>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  position: relative;
  cursor: none;
}

.cursor,
.follower {
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0; 
  pointer-events: none;
}

.cursor {
  width: 8px;
  height: 8px;
  background-color: #000;
  z-index: 1001;
}

.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: rgba(#fdfe00, .5);
  z-indes: 1000;
  transition: transform ease .1s;
  text-align: center;
  span {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    transform: scale(0);
  }
  &.is-active {
    transform: scale(3);
  }
}

.btn {
    display: inline-block;
    width: 160px;
    margin: 16px;
    text-align: center;
    font-size: 16px;
    line-height: 1;

    a {
      display: block;
      color: #fff;
      text-decoration: none;
      padding: 16px;
      background-color: #000;
      cursor: none;
    }

}
var
cursor = $(".cursor"),
follower = $(".follower"),
cWidth = 8, //カーソルの大きさ
fWidth = 40, //フォロワーの大きさ
delay = 10, //数字を大きくするとフォロワーがより遅れて来る
mouseX = 0, //マウスのX座標
mouseY = 0, //マウスのY座標
posX = 0, //フォロワーのX座標
posY = 0; //フォロワーのX座標

//カーソルの遅延アニメーション
//ほんの少ーーーしだけ遅延させる 0.001秒
TweenMax.to({}, .001, {
  repeat: -1,
  onRepeat: function() {
    posX += (mouseX - posX) / delay;
    posY += (mouseY - posY) / delay;
    
    TweenMax.set(follower, {
        css: {    
          left: posX - (fWidth / 2),
          top: posY - (fWidth / 2)
        }
    });
    
    TweenMax.set(cursor, {
        css: {    
          left: mouseX - (cWidth / 2),
          top: mouseY - (cWidth / 2)
        }
    });
  }
});

//マウス座標を取得
$(document).on("mousemove", function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});

$("a").on({
  "mouseenter": function() {
    cursor.addClass("is-active");
    follower.addClass("is-active");
  },
  "mouseleave": function() {
    cursor.removeClass("is-active");
    follower.removeClass("is-active");
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.3.1.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js