Original little pointers, released here.
Use the PNG files with CSS to dress a personal homepage, guestbook or small web project. The pointer belongs to an element on your page; it does not change the visitor’s operating system.
The ZIP opens as a working, standalone page. The original SVGs are included for editing. You do not need a library, extension, API key or hosted asset service.
Extract the ZIP, then open index.html. For an existing site, take just pointers.css and the cursors folder. Keep them next to one another and link the stylesheet from your HTML.
your-page.html
pointers.css
cursors/
petal-arrow.png
petal-link.png
petal-text.png
…<link rel="stylesheet" href="pointers.css">
<main class="dotpetal-zone">
Your existing page content
</main>If you move the stylesheet into assets/, move the cursor folder beside it too, or change the image paths inside the CSS. A path in url() is relative to that stylesheet, not the page that imports it.
Check that the class is on the intended region and the stylesheet loads. Open the referenced PNG URL directly: a 404 or HTML error page is not a cursor image. Also check for a later CSS rule overriding cursor. Keep the 32-pixel PNG dimensions unchanged while finding the problem.
The normal arrow, link hand and text caret have different jobs. These rules keep the hand on usable links and buttons, and the I-beam inside text fields. The two numbers after each image are the click point, measured from its top-left corner.
.dotpetal-zone { cursor: url("cursors/petal-arrow.png") 3 2, default; }
.dotpetal-zone a, .dotpetal-zone button:not(:disabled) { cursor: url("cursors/petal-link.png") 12 2, pointer; }
.dotpetal-zone input, .dotpetal-zone textarea { cursor: url("cursors/petal-text.png") 15 15, text; }The final word is a native fallback if the picture cannot be used. In this set the arrow points at 3 2, the hand at 12 2, and the text caret at 15 15. If you redraw or resize an image, recheck that point instead of blindly copying it.
Try the link to the Petal release, then click into a field. This example uses the same role-specific images as the download.
Nothing has been sent.
Only the note is copied into the preview, as text. This sample sends no email, uploads nothing and saves no input.
You can, but doing so hides useful clues. Keep the hand for actions, the text caret for writing and an unavailable pointer for a disabled control. Decoration should leave those differences readable. The download includes optional named role selectors for more specific interactions; use them only where the action fits.
Open the extracted example in your own browser. Move from ordinary text to a link and then a text field; click near the start of a word and check that the caret lands where you expect. Use Tab to reach every action. On a phone, the same form must work without a pointer.
After you put your page online, check that its images and stylesheet load for a fresh visitor. WebTraceCheck offers a separate cloud browser for checking your public URL and form behaviour. Its desktops run Linux; check the actual cursor appearance on the visitor systems you want to support as well.
If your own page later adds a real email signup, CleanTempMail can provide a disposable inbox for a non-sensitive test submission. That tests your mail flow, not the cursor. Use a lasting address for real accounts or account recovery. This example has no signup service behind it.
A CSS cursor stays inside the page region where its rule applies. It does not change browser toolbar controls or a different website, and a touchscreen may show no mouse pointer at all. To undo this web styling, remove the dotpetal-zone class or the stylesheet link. For Windows-wide changes, use the separate Windows note and CUR files.
Open the complete Petal example ↗
Open the complete Starlet example ↗
MDN: CSS cursor syntax and browser limits ↗
All pointer artwork and sample code here are original. You may use, modify and redistribute them, including commercially, under the permission in each ZIP. Keep that permission with redistributed source files. No attribution is required.
The linked products and DotPetal share an operator. Product links carry this site’s campaign and placement labels, never what you typed. Those services have their own accounts, limits and policies; neither is needed to use the files.