Posted in
4149
1:40 am, May 1, 2022
Change your cursor into an Emoji Cursor or Image Cursor
You can use the following property to change the cursor on an element.
The property we will be changing is
cursor
Preview of the Cursor States
About the Cursor CSS Property
The cursor
CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.
The cursor setting should inform users of the mouse operations that can be performed at the current location, including: text selection, activating help or context menus, copying content, resizing tables, and so on. You can specify either the type of cursor using a keyword, or load a specific icon to use (with optional fallback images and mandatory keyword as a final fallback).
There are a couple of defaults you can set for cursor.
Mouse over these items to see the cursor
- help
- wait
- crosshair
- not-allowed
- pointer
- zoom-in
- grab
You can also use Emoji's and Images
By using the url property.
Preview of Cursor Demo
Change your cursor into an Emoji Cursor or Image Cursor Demo
View Demo Full Screen View Demo New Tab
Change your cursor into an Emoji Cursor or Image Cursor Code
HTML
<div class='box-wrap'>
<div class='dbox pink-bg cursor-wait'>Wait!</div>
<div class='dbox blue-bg cursor-emoji'>Emoji Cursor... Mmm Coffee</div>
<div class='dbox orange-bg cursor-image'>Image Cursor</div>
</div>
CSS
.box-wrap {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.dbox {
display: flex;
align-items: center;
justify-content: center;
height:200px;
width:200px;
border-radius:10px;
margin-right:10px;
box-shadow:0px 1px 2px #000;
color:#FFF;
text-shadow:0px 1px 2px #000;
}
.pink-bg {
background:pink;
}
.blue-bg {
background:blue;
}
.orange-bg {
background:orange;
}
.cursor-wait {
cursor:wait;
}
.cursor-emoji {
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>☕</text></svg>"), auto;
}
.cursor-image {
cursor: url(https://picsum.photos/20/20), auto;
}
Related Tags
Add Comment
Other Items in CSS Cursors
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript