.cur (ইন্টারনেট এক্সপ্লোরারের জন্য), .gif এবং .png (ক্রোম, ফায়ারফক্স, সাফারির জন্য) এক্সটেনশনवाले কাস্টম কার্সর ইমেজ তৈরি করে CSS cursor প্রপার্টি ব্যবহার করে একটি এলিমেন্টে প্রয়োগ করা যায়, URL সেট করে এবং একটি জেনেরিক কার্সর মান (auto, default, pointer, ইত্যাদি) যোগ করে।
সমাধান
Selector { cursor: url("/*path to custom cursor file*/"), generic cursor; }
উদাহরণ
কাস্টম কার্সর তৈরি করার উদাহরণ:
<!DOCTYPE html> <html> <head> <title>Custom Cursor Using CSS</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #tech1 { cursor: url("https://www.tutorialspoint.com/images/dbms.png"), auto; } #tech2 { cursor: url("https://www.tutorialspoint.com/images/Python.png"), auto; } </style> </head> <body> <form> <fieldset> <legend>Custom Cursor Using CSS</legend> <h1>Learn</h1> <input type="button" id="tech1" value="DBMS"> <input type="button" id="tech2" value="Python"> </fieldset> </form> </body></html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
'DBMS' বাটনের ওপর হোভার করলে:
'Python' বাটনের ওপর হোভার করলে:
