CSS Tutorial for Beginners - 38 - Custom cursor Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in the last video we talked about how to
change the cursor on your web page using
CSS but we did not talk about how to use
a custom cursor and that's what we're
going to do in this video and to do that
we have to use the value URL now I
created a website folder here that
contains of course our index.html and
our stylesheet and in there I copied the
icon that we're going to use for our
cursor which in this case is mail dot
ICO now if you want to follow along you
can search your C Drive or your computer
using this criteria wildcard dot ICO and
that should bring up a ton of icons that
you can use you can also go to Google
and search for free icons and you'll get
thousands of results but the main thing
is to copy whatever you decide to use to
the website folder so you don't have to
specify the path and I'll show you that
in a minute so let's go ahead and open
up our webpage here for just a second so
what we're going to do is use a
different cursor when we hover over this
button and we're going to use this mail
icon so let's close this out and of
course we have to go down to hover and
I've already typed this out so I'll just
copy and paste it here
now of course cursor is the property the
value is URL and this is where we
specify the file and as I said we don't
have to put a path here because it's in
the same folder that our style sheet and
index.html are located
now what this default does is if the
browser cannot load this file it will
use the default cursors that the browser
loads and so that's a good sort of
safety mechanism to set up here so
always make sure you put this in okay so
let's go ahead and save this and let's
go ahead and open up our index.html and
we'll now hover over the button and you
can see now we've got our custom cursor
that we wanted to use okay that's going
to do it for this video I will see you
guys in the next video