Custom cursor on a webpage in pure CSS

Hello everyone, today we are going to look at the cursor property available in CSS. And why not use a custom cursor ?

Pre-integrated cursors

The CSS allows us to choose a cursor from over thirty pre-built cursors. Some browsers automaticall…

Hello everyone, today we are going to look at the cursor property available in CSS. And why not use a custom cursor ?



Pre-integrated cursors

The CSS allows us to choose a cursor from over thirty pre-built cursors. Some browsers automatically switch to certain cursors, for example when the cursor passes over a link, the browser instinctively understands that it is a clickable element and switches the mouse cursor to the cursor: pointer; property.

To summarise, here is a table of almost all the sliders currently available in CSS :

CSS value Description
auto The UA will determine the cursor to display based on the current context. E.g., equivalent to text when hovering text.
default The platform-dependent default cursor. Typically an arrow.
none No cursor is rendered.
context-menu A context menu is available.
pointer Help information is available.
none The cursor is a pointer that indicates a link. Typically an image of a pointing hand.
progress The program is busy in the background, but the user can still interact with the interface (in contrast to wait).
cell The table cell or set of cells can be selected.
crosshair Cross cursor, often used to indicate selection in a bitmap.
text The text can be selected. Typically the shape of an I-beam.
vertical-text The vertical text can be selected. Typically the shape of a sideways I-beam.
alias An alias or shortcut is to be created.
copy Something is to be copied.
move Something is to be moved.
no-drop An item may not be dropped at the current location. On Windows and Mac OS X, no-drop is the same as not-allowed.
not-allowed The requested action will not be carried out.
grab Something can be grabbed (dragged to be moved).
grabbing Something is being grabbed (dragged to be moved).
all-scroll Something can be scrolled in any direction (panned). On Windows, all-scroll is the same as move.
col-resize The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
row-resize The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
zoom-in Something can be zoomed (magnified) in.
zoom-out Something can be zoomed (magnified) out.

For more information, you can also consult the documentation on the CSS cursor property on the MDN Web Docs site.

You can see a demo of some of the cursors below :



Custom cursor

Fortunately we are not limited to pre-built cursors, we can use custom cursors in pure CSS.
To add a custom cursor, it’s quite simple, we use url: cursor: url(one.svg);. But we are not limited to urls, we can also put an svg as in the code below, where we ask the browser to replace our mouse cursor with the svg :

html{
  cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24px' height='24px' viewBox='0 0 512 512' style='enable-background:new 0 0 512.011 512.011;' xml:space='preserve'%3E %3Cpath fill='DeepSkyBlue' d='M434.215,344.467L92.881,3.134c-4.16-4.171-10.914-4.179-15.085-0.019  c-2.011,2.006-3.139,4.731-3.134,7.571v490.667c0.003,4.382,2.685,8.316,6.763,9.92c4.081,1.603,8.727,0.545,11.712-2.667  l135.509-145.92h198.016c5.891,0.011,10.675-4.757,10.686-10.648C437.353,349.198,436.226,346.473,434.215,344.467z'/%3E %3C/svg%3E"), pointer;
}

You can see the result of our code below :

I hope this tutorial has allowed you to add your own custom sliders to your website, or at least to have discovered how to use them, if you have any questions, feel free to ask me in the comments. ?


Print Share Comment Cite Upload Translate
APA
Clément Gaudinière | Sciencx (2024-03-28T19:52:07+00:00) » Custom cursor on a webpage in pure CSS. Retrieved from https://www.scien.cx/2021/07/29/custom-cursor-on-a-webpage-in-pure-css/.
MLA
" » Custom cursor on a webpage in pure CSS." Clément Gaudinière | Sciencx - Thursday July 29, 2021, https://www.scien.cx/2021/07/29/custom-cursor-on-a-webpage-in-pure-css/
HARVARD
Clément Gaudinière | Sciencx Thursday July 29, 2021 » Custom cursor on a webpage in pure CSS., viewed 2024-03-28T19:52:07+00:00,<https://www.scien.cx/2021/07/29/custom-cursor-on-a-webpage-in-pure-css/>
VANCOUVER
Clément Gaudinière | Sciencx - » Custom cursor on a webpage in pure CSS. [Internet]. [Accessed 2024-03-28T19:52:07+00:00]. Available from: https://www.scien.cx/2021/07/29/custom-cursor-on-a-webpage-in-pure-css/
CHICAGO
" » Custom cursor on a webpage in pure CSS." Clément Gaudinière | Sciencx - Accessed 2024-03-28T19:52:07+00:00. https://www.scien.cx/2021/07/29/custom-cursor-on-a-webpage-in-pure-css/
IEEE
" » Custom cursor on a webpage in pure CSS." Clément Gaudinière | Sciencx [Online]. Available: https://www.scien.cx/2021/07/29/custom-cursor-on-a-webpage-in-pure-css/. [Accessed: 2024-03-28T19:52:07+00:00]
rf:citation
» Custom cursor on a webpage in pure CSS | Clément Gaudinière | Sciencx | https://www.scien.cx/2021/07/29/custom-cursor-on-a-webpage-in-pure-css/ | 2024-03-28T19:52:07+00:00
https://github.com/addpipe/simple-recorderjs-demo