ホバーする位置で丸が大きくなるボタン

実装の考え方

まず最初にボタンの中に丸い円をposition: absoluteで配置しておきscale: 0で非表示にしておきます。ホバーしたらその位置に丸い円を移動させてから、拡大することでホバーした場所から丸い円が拡大していくようになります。

注意事項

今回は便宜上、ボタンサイズは固定値にしていますので、実際に使用する際はデザインなどを加味してボタンサイズを調整してください。

実装方法

それでは実際に実装していきましょう。
まずはHTMLになります。

HTML

<a href="" class="button">
  Button
  <span class="button__circle"></span>
</a>

今回はリンクを想定してaタグにbuttonクラスを付与しています。拡大させる丸い円にはaタグの中にspanタグを入れbutton__circleクラスを付与しています。

SCSS

.button {
  --black: #000;
  --hover-color: #fff;
  --button-size:  280px;

  position: relative;
  display: inline-block;
  padding: 0.75rem 1rem;
  border: 1px solid var(--black);
  color: var(--black);
  overflow: hidden;
  width: 100%;
  max-width: var(--button-size);
  text-align: center;
  border-radius: 1.5rem;
  z-index: 1;
  transition-property: color;
  transition-duration: 0.3s;
  @include mixin.hover {
    color: var(--hover-color);
    .button__circle {
      scale: 2;
    }
  }
  &__circle {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--button-size);
    aspect-ratio: 1;
    background: var(--black);
    border-radius: 50%;
    scale: 0;
    // 中心を合わせるためにボタンサイズの半分のマイナス値を指定
    margin-top: calc(-1 * var(--button-size) / 2); 
    margin-left: calc(-1 * var(--button-size) / 2);
    transition-property: scale;
    transition-duration: 0.5s;
    z-index: -1;
  }
}

丸い円、ホバーしたときの文字色、ボタンサイズにcssのカスタムプロパティを使用しています。

親の.buttonには、丸い円がはみ出さないようにoverflow: hiddenを指定し、丸い円の基準となるのでposition: relativeを指定しています。

丸い円のbutton__circleは、中心を合わせるためにボタンサイズの半分のマイナス値をmargin-topとmargin-leftに指定しています。また、ホバー前はscale: 0で非表示にしています。

また、cssでホバーしたら文字色を変えるようと、丸い円を拡大させるようにしています。ここでは、円を全て覆うようにするために、scale: 2を指定しましたが、この値は円の大きさによって調整してください。

JavaScript

const button = document.querySelector('.button');
const buttonCircle = document.querySelector('.button__circle');

const mouseEnterLeave = (event) => {
  if (!button || !buttonCircle) return;

  const x = event.offsetX;
  const y = event.offsetY;
  buttonCircle.style.translate = `${x}px ${y}px`;
}

button?.addEventListener('mouseenter', mouseEnterLeave);
button?.addEventListener('mouseleave', mouseEnterLeave);

ボタン要素をmouseenterとmouseleaveしたときに実行する関数mouseEnterLeaveの中で、ホバーした位置を取得しています。

offsetXとoffsetYは、要素内でのマウスの位置を取得するプロパティです。これを使うことで、ボタンの中でホバーした位置を取得することができます。

取得した位置を元に、translate プロパティを使って、丸い円を移動させています。
JavaScriptはこれだけになります。

Feylo