This is Sasha and welcome to another CSS training video where I share with you how you can modify and manipulate your business website and only presence. But today we’re going to take a look at the cursor element so that way you can edit the cursor if you’re looking to have a different cursor on a button, help screen or adjust something as people are moving the mouse within your website. Let’s take a quick look.
Modifying the cursor with CSS
In general, I don’t use this property that much. I will use it sometimes to have a button where it’s like a hand or a cursor and in that case, you know, I might go ahead and use this if I force or need to do something. But ultimately when you have a button or property like this, so I’ve set up a primary button, notice how when I roll over this button, it automatically changes that cursor to that pointer finger.
--------------------- HTML CODE ------------------ Backstageincome --------------------- CSS CODE ------------------ a:link, a:active { padding: 25px; background: #5dc17b; } a:hover { padding: 25px; background: #5dc17b; }
That’s what it does. What you can do depending on the element or the text that you have let’s say you have a paragraph of something else. There’s a lot of different cursors out there and if you go to W3Schools, there’s – you can take a look at all the different types of cursors that there are from northwest resize to northwest resize to no-drop to none to pointer to progress to text to all kinds of different things – to wait.
In either case, depending on after – let’s say after you click a button, you might go ahead and type a cursor and then what you’ll do is you’ll type in wait. Let’s say as I do the rollover, you can see how that changes to the hourglass right there. That could be a cursor that you might want to use on something like after I hit the submit button and it turns to wait. You could also do something like zoom in or zoom out.
--------------------- HTML CODE ------------------ Backstageincome --------------------- CSS CODE ------------------ a:link, a:active { padding: 25px; background: #5dc17b; } a:hover { padding: 25px; background: #5dc17b; cursor: wait; }
You can see there’s the magnifying glass, so if you have a picture that you can click and on the roll over you wanted to click then you can do something like zoom in or zoom out. Well, let’s just take a quick peek. You can see that has that minus sign.
You could also do something like let’s say move if there’s something that’s movable on your website right there. If you have a dynamic element, you could also do something like help, okay? Advice could great for frequently asked questions as they roll over or they click on something that they might open like an accordion.
--------------------- HTML CODE ------------------ Backstageincome --------------------- CSS CODE ------------------ a:link, a:active { padding: 25px; background: #5dc17b; } a:hover { padding: 25px; background: #5dc17b; cursor: move; }
There’s also grab, okay? You go ahead and hit the grab, and you can see there’s that pointer there.
Crosshair also here’s another one, if you want crosshair, so as you roll over, you can see it changes to that crosshair version. How about copy, okay? Let’s take a quick look. You can see copy has that little plus right there, and I’ve never seen all-scroll, I don’t think, so let’s see what that looks like, okay? There you go. That has that crosshair kind of as well.
In either case, there’s quite a bit of version and variations there when it comes to the cursor. Usually, you’ll probably just stick to one or two and if you’re doing with some images, you might do zoom in, zoom out but that’s how you use this cursor property to be able to, you know, modify that cursor as you roll over either picture or you roll over a button or you roll over a help tip or you roll over a dynamic element that you can move. You can use it with CSS in this manner.
