How to Change The Mouse Cursor of a Website?

Abdul Wali June 2, 2013 CSS, Web Designing 1 Comment 849 Views

This is a very small tip for those who want to change their website or blog’s mouse cursor. I came across many websites and blogs who have changed their cursors either to different styles or to images. So simply they use CSS property to change the mouse cursor. It is easier to change the cursor for the entire website or for a part of the website. So here in this tutorial I’m going to teach you about this. As you know CSS is the most beautiful web language to style websites and any kind of webpage. And CSS3 new properties has changed the entire concept of web designing. Now you’ll no more need of using Flash for your websites, because CSS3 does the job for you.

Changing Mouse Cursor with CSS

The default mouse cursor is something like an arrow which many newbies want to change to something else. So here is the CSS code which you can use to change the pointer of the mouse, there are some values defined in CSS3 standard, however by using the URL property you can add an image, see below example.

<!DOCTYPE html>
<html>

<head>

<title> Changing Cursor</title>

<style type=”text/css”>

body {

cursor:url(http://www.123cursors.com/freecursors/1055.gif);

}

</style>

</head>

<body>

</body>

</html>

The example above will be replacing the default arrow with an image which is stored online in a website 123cursors.com. So if you copy the above code and paste inside notepad and save it with .html extension then visiting the page on your browser, so the cursor will be replaced with an image.

CSS core values for changing mouse cursor

Here is the list of the all values which has been defined in CSS core programming. You can use one of the below listed values to change the pointer/cursor of your website:

cursor:crosshair;
cursor:e-resize;
cursor:help;
cursor:move;
cursor:n-resize;
cursor:ne-resize;
cursor:nw-resize;
cursor:pointer;
cursor:progress;
cursor:s-resize;
cursor:se-resize;
cursor:text;
cursor:wait;
cursor:url(image.png);

All of the above values are the part of the CSS. You can use any of them to see the effect on your webpage.

Now here is the live example of changing the mouse pointer by using CSS, just hover your mouse over below green bordered area to see the effect:

Hover your mouse here on this area to see how the pointer is changed with css!

The example above shows how the pointer is changed. We just used this CSS property in an HTML DIV:

<div style=”cursor:url(http://www.123cursors.com/freecursors/6890.gif); border:4px solid green; padding:15px;”> Content Goes Here</div>

You can also copy the above code to check it by yourself. However, if you want to change the cursor of your entire blog or website then you must add the CSS cursor property inside <body> tag.

You can download a numerous number of free mouse pointers by visiting below websites:

You can use any image for the pointer as you want, but the smaller sizes are pretty much better than larger images. So do implement today’s trick and let me know if you have something to say.