HTML-CSS: Mouse cursor gradient tracking

Last update on March 07 2024 13:21:47 (UTC/GMT +8 hours)

HTML-CSS : Exercise-8 with Solution

Using HTML, CSS, JavaScript create a hover effect where the gradient follows the mouse cursor.

Declare two CSS variables, --x and --y, used to track the position of the mouse on the button.
Declare a CSS variable, --size, used to modify the gradient's dimensions.
Use background: radial-gradient(circle closest-side, pink, transparent); to create the gradient at the correct position.
Use Document.querySelector() and EventTarget.addEventListener() to register a handler for the 'mousemove' event.
Use Element.getBoundingClientRect() and CSSStyleDeclaration.setProperty() to update the values of the --x and --y CSS variables.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- License information -->
<!DOCTYPE html><!-- Document type declaration -->
<html><!-- Start of the HTML document -->
<head><!-- Head section containing metadata -->
<meta charset="utf-8"><!-- Character encoding -->
<meta name="viewport" content="width=device-width"><!-- Responsive viewport settings -->
<title>Using HTML, CSS, JavaScript create a hover effect where the gradient follows the mouse cursor</title><!-- Title of the document -->
</head><!-- End of the head section -->
<body><!-- Body section containing content -->
<strong>Preview:</strong><br><!-- Text content for preview -->
<button class="mouse-cursor-gradient-tracking"><!-- Button element with class for styling -->
<span>Hover me</span></button><!-- Button text -->
</body><!-- End of the body section -->
</html><!-- End of the HTML document -->

Explanation:

The HTML structure includes a document type declaration, HTML tags, head section, and body section.
The metadata in the head section specifies the character encoding and viewport settings for responsiveness.
The title element sets the title of the document.
Inside the body section, there's a preview text and a button element with a class for styling.

CSS Code:

<style> /* Opening style tag for CSS */

.mouse-cursor-gradient-tracking {
  position: relative; /* Set the position relative to position the pseudo-element */
  background: #7983ff; /* Background color */
  padding: 0.5rem 1rem; /* Padding for the button */
  font-size: 1.2rem; /* Font size */
  border: none; /* Remove border */
  color: white; /* Text color */
  cursor: pointer; /* Set cursor style to pointer */
  outline: none; /* Remove default outline */
  overflow: hidden; /* Hide overflow */
}

.mouse-cursor-gradient-tracking span {
  position: relative; /* Set the position relative */
}

.mouse-cursor-gradient-tracking:before {
  --size: 0; /* Custom property for size */
  content: ''; /* Empty content */
  position: absolute; /* Set the position absolute */
  left: var(--x); /* Position from left based on mouse movement */
  top: var(--y); /* Position from top based on mouse movement */
  width: var(--size); /* Width of the pseudo-element */
  height: var(--size); /* Height of the pseudo-element */
  background: radial-gradient(circle closest-side, red, transparent); /* Gradient background */
  transform: translate(-50%, -50%); /* Translate the pseudo-element */
  transition: width 0.2s ease, height 0.2s ease; /* Transition effect for width and height */
}

.mouse-cursor-gradient-tracking:hover:before {
  --size: 200px; /* Size of the pseudo-element on hover */
}

</style> /* Closing style tag */

Explanation:

The CSS code defines styles for creating a button with a hover effect where the gradient follows the mouse cursor.
Comments are added using the CSS commenting format (/* comment */) to explain each CSS rule and property.
Custom properties (--size, --x, --y) are used to control the size and position of the pseudo-element.
The button has a background color, padding, font size, and other styling properties.
A pseudo-element (::before) is used to create the gradient effect that follows the mouse cursor on hover.
Transitions are applied to smoothly animate the size changes of the pseudo-element.

JavaScript Code:

<script>
let btn = document.querySelector('.mouse-cursor-gradient-tracking');
btn.addEventListener('mousemove', e => {
  let rect = e.target.getBoundingClientRect();
  let x = e.clientX - rect.left;
  let y = e.clientY - rect.top;
  btn.style.setProperty('--x', x + 'px');
  btn.style.setProperty('--y', y + 'px');
});

</script>

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.