Custom Cursor With Mouse Hover Effects Using HTML ,CSS And JavaScript

Create Custom Mouse Cursor Effects JavaScript

Create Custom Mouse Cursor Effects JavaScript

Hello and welcome to the Codewithrandom Blogs. In this blog, we will create a custom mouse cursor with a hover effect using html, css, and javascript. We’ll make a custom cursor, and when the user hovers the cursor over an element, the zoom circle effect with text movement will appear.

Custom Cursor With Mouse Hover Effects

Custom Cursor With Mouse Hover Effects Using HTML,CSS, And JavaScript

To emphasize particular website elements, users can create their own cursors. These personalized cursors are used to both improve the website’s content’s readability and to attract users’ attention to a particular section of the site.

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

Code byAbdumalik
Project DownloadLink Available Below
Language usedHTML ,CSS and JavaScript
External link / DependenciesNo
ResponsiveYes
Custom Cursor With Mouse Hover Effects Table

I hope you must have got an idea about the project.

So, let’s get started on the Custom Cursor Project by adding the source codes. First, we’re going to use HTML code.

Step1: HTML code for Custom Cursor

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Read More Button</title>
      <link href="https://fonts.googleapis.com/css?family=Russo+One&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css" />
   <body>
    <div class="nav-wrapper">
      <nav>
        <a href="#" class="hover-this"><span>Home</span></a>
        <a href="#" class="hover-this"><span>Our Story</span></a>
        <a href="#" class="hover-this"><span>Studio</span></a>
        <a href="#" class="hover-this"><span>Contact</span></a>
        <div class="cursor"></div>
      </nav>
    </div>
    <script src="index.js"></script>
   </body>
</html>

  • First, we create a div with the (nav-wrapper) class to hold our navbar content. In this project, we used JavaScript to create a navbar that will be used to displayed the mouse effect.
  • Now we’ll use the nav tag to create the navbar, which will contain four anchor tags.
  • We’ll use a span tag inside the anchor tag to specify the various navbar buttons, such as home, our story, studio, and contact.
  • We also created a blank div tag to create our custom cursor.
  • Now, just before the end of our body, we’ll add a link to our JavaScript.

Create Portfolio Website Using HTML and CSS (Source Code)

<script src="index.js"></script>

Let’s take a look at our output which was created solely with HTML.

Html Code Output:

Custom Cursor With Mouse Hover Effects Using HTML

So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code.

Ecommerce Website Using Html Css And Javascript Source Code

ADVERTISEMENT

Before we can style our page, we must add the Google Fonts and external styling links to the head section of our html.

ADVERTISEMENT

ADVERTISEMENT

<link href="https://fonts.googleapis.com/css?family=Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />

ADVERTISEMENT

Step2: CSS Code for Custom Mouse Cursor Effects

ADVERTISEMENT

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

Now we will look at our CSS code

html, body {
  margin: 0;
  padding: 0;
  cursor: none;
}

.nav-wrapper {
  width: 100%;
  height: 100vh;
  background: #161616;
}

nav {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
}

.hover-this {
  transition: all 0.3s ease;
}

span {
  display: inline-block;
  font-family: 'Russo One', sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: 36px;
  text-transform: uppercase;
  pointer-event: none;
  transition: transform 0.1s linear;
}

.cursor {
  pointer-events: none;
  position: fixed;
  padding: 0.3rem;
  background-color: #fff;
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: transform 0.3s ease;
}

.hover-this:hover ~ .cursor {
  transform:translate(-50%, -50%) scale(8);
}

@media(min-width: 900px) {
  nav {
    display: flex;
    justify-content: space-around;
  }
}

@media(max-width: 900px) {
  nav {
    top: 30%;
  }
  
  .hover-this {
    width: 100%;
    padding: 20px 0;
    display: inline-block;
  }
}

Now that we’ve included our CSS code in our article, let’s go over it step by step.

Step1: To begin, we’ll set the padding and margin to zero using the html and body tags. We also set the cursor to be none.

html, body {
  margin: 0;
  padding: 0;
  cursor: none;
}

Step2:  Using the class selector (.nav-wrapper), we will now set the width to “100%,” the height to “100vh,” and the background colour to “black”.

Create Resume/CV Website Using HTML and CSS (Source Code)

.nav-wrapper {
  width: 100%;
  height: 100vh;
  background: #161616;
}

Create Custom Mouse Cursor Effects JavaScript

Step3: Now using the nav tag we will the width as “100%” of our navbar  . The margin for top and bottom is set to zero and for left and right as “auto”.  Using the text aligned property we will align the text at the center. The position is also defined as “absoute” . We also leave the half of  the space from the top using top (50%).

nav {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
}

Step4: The “.hover-this” class is used to add the ease transition to our anchor elements. Now, we’ll style the various navbar contents with the span tag. We set the display to “inline-block.” The font family is set to “Russo One,” and the font weight is set to “400.” We set the font size to “36px.” Using the text-transform property, we now convert all of the content to “uppercase.” We also included a linear transition for 0.1s.

.hover-this {
  transition: all 0.3s ease;
}

span {
  display: inline-block;
  font-family: 'Russo One', sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: 36px;
  text-transform: uppercase;
  pointer-events: none;
  transition: transform 0.1s linear;
}

Step5: We now set the pointer events to “none” by using the “.hover” class. We set the position to fixed, padding to 0.3 rem, and background colour to “white.” The border radius was also set to 50%. We added 0.3s to make the transition easier. Using the hover selector on our “.cursor” class, we added the transform and scale properties to change the position and size of the element when the cursor is hovered over it.

.cursor {
  pointer-events: none;
  position: fixed;
  padding: 0.3rem;
  background-color: #fff;
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: transform 0.3s ease;
}

.hover-this:hover ~ .cursor {
  transform:translate(-50%, -50%) scale(8);
}

Create Custom Mouse Cursor Effects JavaScript

Step6:Now we’ll make our website more responsive. We define the maximum width as “900px” using the media query if the size of the window is equal to or less than the defined width. The top position of the navbar is set to 30%, and we use the (.hover-this) attribute to set the width to 100%, top and bottom padding to 20 px, and display to inline block.

Restaurant Website Using HTML and CSS

@media(max-width: 900px) {
  nav {
    top: 30%;
  }
  
  .hover-this {
    width: 100%;
    padding: 20px 0;
    display: inline-block;
  }
}

Now we have completed our css code and below👇here is the output after styling our webpage.

Output:

Custom Cursor With Mouse Hover Effects Using HTML ,CSS
Custom Cursor With Mouse Hover Effects Using HTML ,CSS

Gym Website Using HTML and CSS (Source Code)

Step3: Custom Mouse Cursor Effects JavaScript Code

Even after applying the CSS and HTML, our cursor won’t work until we will not add the functionality to cursor.

Now let’s take a look at our javascript code

(function () {

    const link = document.querySelectorAll('nav > .hover-this');
    const cursor = document.querySelector('.cursor');

    const animateit = function (e) {
          const span = this.querySelector('span');
          const { offsetX: x, offsetY: y } = e,
          { offsetWidth: width, offsetHeight: height } = this,

          move = 25,
          xMove = x / width * (move * 2) - move,
          yMove = y / height * (move * 2) - move;

          span.style.transform = `translate(${xMove}px, ${yMove}px)`;

          if (e.type === 'mouseleave') span.style.transform = '';
    };

    const editCursor = e => {
          const { clientX: x, clientY: y } = e;
          cursor.style.left = x + 'px';
          cursor.style.top = y + 'px';
    };

    link.forEach(b => b.addEventListener('mousemove', animateit));
    link.forEach(b => b.addEventListener('mouseleave', animateit));
    window.addEventListener('mousemove', editCursor);

})();

To begin, we will create a function and, within it, two constant variables that will store the values of our that will be returned by our document query selector. Now we’ll make a constant variable called “animateit” and a function with (e) as an object handler. Using this keyword, we will select our span element within the function. Now we’ll make two objects (offsetX, offsetY) and store their values in our object handler. Now we’ll make a variable move with the value 25.

Now, the condition in the xMove is for horizontal cursor movement, and the condition in the yMove is for vertical cursor movement. We will now add cursor movement using the span.style.transform method. We’ve also added a condition: if the object handler is equal to mouseleave, the cursor will only move to that point.

Create Sidebar Menu Using HTML,CSS and JavaScript (Source Code)

Using the edit cursor now adds the zoom effect to our text, and we’ve added a mouse event listener because moving the mouse causes the animation to start and stop.

We now have the functionality in our sidebar drop-down menu. Let’s watch a quick video to see how it works.

Final Output Of Custom Mouse Cursor Effects Using JavaScript:-

Live Preview of Custom Cursor With Mouse Hover Effects Using HTML,CSS, And JavaScript

Now We have Successfully created our Custom Mouse Cursor Effects JavaScript. You can use this project for your personal portfolio to make it more appealing. We hope you understood the project, If you have any doubts feel free to comment!!

If you find out this Blog helpful, then make sure to search code random on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun

Code by : @Abdumalik

Which code editor do you use for this Custom Cursor With Mouse Hover Effect coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

How to change the cursor type using css?

Change the type of the mouse cursor on components by using the CSS cursor property. On websites where users should perform additional activities in addition to clicking, it may be helpful.

Which property is used to for custom cursor?

Inside CSS, using the cursor property, we can customize our cursor.
for example:
cursor: pointer;



Leave a Reply