VISUALS CREATOR

3 BEST WAY TO CHANGE THE CURSOR IN A WEBSITE

how to change the cursor in a website

BEST WAY TO CHANGE THE CURSOR IN A WEBSITE without JavaScript

Are you interested to change the cursor of your website?

Everyone gets bored with their basic default pointer. Having attractive cursors is the new trend for the website.

Long time back even I wanted to change the cursor of my website. But there were no good videos or documentation for how to do it in an easy way. So after working hard, I found the easiest way to change cursor without Java Script. With this  simple code you can not only change the cursor in HTML based website but also in WordPress.

There are various plugins in WordPress  But non of them works and fulfill the expectation. On  the other hand too many plugins increase your website loading time.

Paid plugins are too expensive and have mostly 1 year support and you have to purchase them again for $49-$300.

So why not to make your website look attractive with just a simple code.

But writing long boring JavaScript and CSS code blows the mind off. But no more!

With just 3 lines of CSS code, you will be able to understand and change the cursor on any website.

All you require is an image (can be .jpg, .png or .svg). Yes right! Just 1 image that you want as your pointer.

Just copy the CSS code given below and enter the file path inside the () after URL.

chnage cursor 1

*{

cursor: url(‘https://visualscreator.com/wp-content/uploads/2020/06/cursor-3.png’),0,0auto;

}

CODE EXPLANATION:

  • The  *  stands for all, i.e. this cursor change will be applicable on complete website
  • Cursor – points to the default cursor
  • URL takes the path of the cursor
  • 0,0 are the x, y index for the cursor

If you want to change the cursor on specifically on links, buttons, and inputs you can change it by the following code:

change cursor button

button, a {

cursor: url(‘https://visualscreator.com/wp-content/uploads/2020/06/cursorH-1.png’) 0 0, auto;

}

When you specify the classes, id, or elements in CSS the priority is given to the specification. Hence the * will be overpowered by the button and anchor tag.

You can simply give input type where you want to change your cursor in the above CSS code. Like in the following code.

chnage cursor input type

input[type=”text”], input[type=”submit “], textarea, {cursor: url(‘https://visualscreator.com/wp-content/uploads/2020/06/cursorH-1.png’) 0 0, auto;

}

You can simply change cursor in WordPress without any external plugin using the code

All you have to do is follow these 2 steps

1.Dashboard open appearance => Customize

Wordpress cursor

2.Additional CSS and paste the above code in it.

Wordpress cursor 1

Wordpress cursor 21

You can also read the official MS documentation to know about different types of  cursor  

https://docs.microsoft.com/en-us/windows/win32/uxguide/inter-mouse

Leave a comment

Your email address will not be published. Required fields are marked *