As I was browsing Tonsky’s blog for yesterday’s post, I noticed the pretty mouse pointers. Are those new? Better yet: When you click, they change their shapes! That’s something I’ve only seen in games so far. How fun!

As seen on tonsky.me

Two questions:

• Wouldn’t this be cool to have in your operation system? Or is this already a thing? In some application maybe?
• How is this done in HTML and CSS? I only know about the cursor property in CSS, is there a cursor-pressed property as well?

Okay, that was more than two questions. As for the implementation, it’s an :active pseudo-selector applied to some usually-not-clickable elements, including the page body. Cool, I didn’t know you could do that!

body        { cursor:url('pointer1.png'); }
body:active { cursor:url('pointer2.png'); }

See it in action: Click around in the area below, or try it on a separate page. (Sorry, mobile or tablet users: This only works with a mouse or trackball…)

Good thing I made the perfect test picture for that in 1998! :)