When you hover over an element of a webpage, your cursor also tells a story. It defines what to do with that element.
For example, when you hover over an element and see that little hand-icon (pointer), you know you can click it. It's a natural thing. But how can you change your default pointer to something else? It's very simple and can be done using only one CSS property. For example, you can add the pointer class to a button, and it will show the pointer icon if you hover over it.
<button class="pointer">Pointer</button>
.pointer {
cursor: pointer;
}
You will find all the available predefined cursor icons/keywords here in this doc.
But you want to hop on to the next level and want to include your own icon. You can do that too. Suppose, you want your website to look cool AF and want to show a Beer 🍺 icon if someone hovers over the text 'beer'. Here's how you can achieve it.
<p>Let's have some <span class="beer">Beer</span></p>
.beer {
cursor: url("beer.png"), auto;
}
Make sure that the image or icon file you choose is less than 32 x 32 pixels. Otherwise, it won't show the icon.
Here's the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container center">
<button>Normal</button>
<button class="pointer">Pointer</button>
<div>
<p>Let's have some <span class="beer">Beer</span></p>
</div>
</div>
</body>
</html>
body {
height: 100%;
}
.center {
margin: auto;
width: 20%;
padding: 10px;
height: 100vh;
display: flex;
flex-direction: column;
item-align: center;
justify-content: center;
}
button {
margin-bottom: 24px;
}
p {
text-align: center;
}
.pointer {
cursor: pointer;
}
.beer {
cursor: url("beer.png"), auto;
}
The icon used here is from Flaticon