How To CSS Custom Cursor Tutorial

How To CSS Custom Cursor Tutorial

This code will give you your custom cusor of your choice. You can place it in the <head> or your .css. It works “almost” perfectly in IE7, IE6, Firefox, and Safari. Unfortunately, this does not work in Opera. Trust me, I scowered the web – this is the closest to perfect pure css method you will find. Because of browser limitations, it’s still a little buggy. You will still need to go out and find your cursor images though. I found mine at google images. Then, just link to the images as shown in the code below.

Firefox and Safari need a keyword after the url in order to display the cursor image – IE does not. In this case, “auto” works perfectly! For IE, the image file extension needs to be a .cur or .ani. Firefox and Safai will only recognize .cur. The a:active (wait) cursor will only display correctly in IE because of the way it treats a:active.

body {
cursor: url("images/arrow.cur"), auto;
a, label, .submit {
cursor: url("images/hand.cur"), auto;
a:active {
cursor: url("images/wait.ani"), auto;
p, h1, h2, h3, h4 { 
cursor: url("images/text.cur"), auto;

Source website

Masum Billah has written 326 articles

Hi I am Md. Masum Billah Contributor of this website. I always like to share various things with other. In this website I am sharing web design related tips and tricks, necessary web development tools, source codes for beginner and advance web developer. You may join with us to help other who want to learn web design and development. Thank you for stay with.

Recommended Articles

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>