Moving Eye

admin1234
Feb 06, 2026 4
Live Preview

Live Editor

<div class="eye-btn">
  <span>Get in touch</span>

  <div class="eyes">
    <div class="eye"><div class="pupil"></div></div>
    <div class="eye"><div class="pupil"></div></div>
  </div>
</div>
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f4f4f4;
  font-family: system-ui, -apple-system, Segoe UI, Roboto;
}

/* Button */
.eye-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px 28px;
  width:320px;
  background:#000;
  color:#fff;
  font-size:20px;
  font-weight:600;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}

/* Eyes container */
.eyes{
  display:flex;
  gap:16px;
}

/* Eye */
.eye{
  width:56px;
  height:56px;
  background:#fff;
  border-radius:50%;
  position:relative;
  overflow:hidden;
}

/* Pupil */
.pupil{
  width:14px;
  height:14px;
  background:#000;
  border-radius:50%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  transition: transform .05s linear;
}
const pupils = document.querySelectorAll('.pupil');
const eyes = document.querySelectorAll('.eye');

document.addEventListener('mousemove', (e) => {
  eyes.forEach((eye, index) => {
    const rect = eye.getBoundingClientRect();
    const eyeCenterX = rect.left + rect.width / 2;
    const eyeCenterY = rect.top + rect.height / 2;

    const angle = Math.atan2(
      e.clientY - eyeCenterY,
      e.clientX - eyeCenterX
    );

    const maxMove = 12; // limit pupil movement
    const x = Math.cos(angle) * maxMove;
    const y = Math.sin(angle) * maxMove;

    pupils[index].style.transform =
      `translate(-50%, -50%) translate(${x}px, ${y}px)`;
  });
});
Categories

Moving Eye

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
