Master Eye Tracking on Your Website/Software Using CSS
CSS-Only Eye Tracking Solutions for Websites and Software
Introduction:
In this tutorial, you’ll learn how to create a fun and interactive eye-tracking animation using HTML, CSS, and a touch of creativity. This project features two buttons designed to look like eyes, complete with pupils that follow the movement of the cursor. The buttons are surrounded by invisible sensors that detect the mouse’s direction, making the pupils shift dynamically. Additionally, the project includes hover and click animations for added engagement, where the “eyes” blink and react to clicks.
Folder Structure:
First we will create our main folder for our project
Then we will create a index.html and style.css files inside it
HTML CODE:
Explanation:
The <body> contains the core structure of the project, wrapped within a <div> with a class of wrapper, which acts as a container for all elements.
The wrapper holds eight directional “sensors,” each represented by a <div> with the class btn-sensor and an inline CSS custom property --a to define their angular position (e.g., 0°, 45°, 90°, etc.). These sensors detect mouse hover events, and their positioning is handled using CSS.
Next, there are two <button> elements styled as “eyes.” Each button has a btn-button class and contains two nested <div> elements: btn-lid and btn-pupil. The btn-lid represents the eyelid and is positioned over the button, while the btn-pupil acts as the moving pupil inside the button.
These elements work together to simulate eye movements and interactions, such as blinking and responding to clicks.
This HTML structure is clean and semantic, using divs and buttons appropriately for interactive and visual elements.
Each class serves a specific purpose for styling and functionality, making the code easy to understand and modify. The sensors and buttons are logically grouped, ensuring the layout is both accessible and visually engaging.
CSS CODE:
* {
Explanation:
The CSS code provides the styling and animations to bring the interactive eye-tracking effect to life.
It starts with a universal selector (*) to reset default browser padding and margins, ensuring a consistent layout across all devices. The box-sizing: border-box property is applied globally to include padding and borders within the width and height of elements, simplifying size calculations.
The html and body elements are styled to center the content using CSS grid with display: grid and place-items: center. This setup ensures that the wrapper, containing the buttons and sensors, is perfectly centered on the screen.
The background-color: #212121 gives the entire page a dark background, creating a contrast that highlights the buttons. Additionally, overflow: hidden on the body prevents unwanted scrolling.
The .wrapper class serves as a container for all elements. Its child elements, the .btn-button (buttons), are styled to look like eyes. These buttons have a circular appearance achieved with border-radius: 10rem and a white background with a solid white border. The padding: 2rem adds spacing around the buttons, and the cursor: pointer indicates that they are clickable.
The .btn-lid is positioned absolutely over the button and has the same dimensions, making it look like an eyelid that covers the button. It serves as the element for animating the blinking effect, with its background transitioning during the animation.
The .btn-pupil is styled to look like a black pupil with a light blue border (rgb(156, 207, 255)) and a circular shape (border-radius: 10rem). Its size is defined by padding, and its position and transformations are controlled dynamically with hover and click events.
The .btn-sensor elements act as invisible zones that detect the mouse’s position relative to the buttons. These sensors are styled with clip-path: polygon to create triangular shapes that extend outward from the buttons in eight directions.
The transform property, combined with the custom property --a, rotates and positions each sensor correctly around the button.
Hover effects for the sensors are defined to move the .btn-pupil in corresponding directions using the transform property. For example, hovering over the .sensor-n moves the pupil upward, while hovering over .sensor-e moves it to the right.
The CSS animations bring interactivity to life. The @keyframes pupil animation creates random, small movements for the pupil, simulating natural eye motion when the button is clicked.
The @keyframes eye-lid animation changes the background of the .btn-lid to simulate a blinking effect, transitioning from fully open to partially closed states.
This CSS code integrates positioning, transitions, and animations seamlessly to create a visually dynamic and interactive experience. The use of pseudo-elements, custom properties, and precise hover and click interactions highlights the power and flexibility of CSS.
Conclusions:
This project successfully created an engaging eye-tracking animation using HTML and CSS. Interactive “eyes” dynamically followed the cursor using invisible sensors placed around buttons. CSS properties like clip-path and custom variables simulated realistic movements and blinking, while keyframe animations enhanced natural responsiveness.
For enhancement and advance integration reach out to me!