How to Change Cursor into a Hand Pointer on Hover using CSS?

When we hover over a link, the mouse cursor turns into a hand pointer by default. This gives an indication to the user that the text he is hovering over is a hyperlink instead of a plain text.

But you can change the cursor into a hand pointer for normal elements also such as buttons, lists, or even plain text.

To change the cursor into a hand pointer you can simply use the cursor property. All you need to do is set the cursor property to pointer for any element that you want.

The following example changes the cursor into a hand pointer as soon as you hover over the buttons:

Example:

button{
   cursor: pointer;
}

Here is one more example which changes the cursor into a hand pointer when you hover over any of the list items:

Example:

li{
    cursor: pointer;
}

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.