HomeCSSCustom Cursors With CSS

Custom Cursors With CSS

Hey everyone. Welcome to this tutorial. In this tutorial, we will learn how to create custom cursors. To create these cursors you will need HTML and CSS.
 
This is a beginner-friendly tutorial. If you are interested to learn HTML, CSS and javascript with such a quick tutorial, you can check out this playlist download here. This playlist from my youtube channel consists of tips and tricks in form of short tutorials. These tutorials will help you grasp major concepts in bite-sized lessons.

Video Tutorial:

If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out this video down below. Also, subscribe to my youtube channel, where I post new tutorials every alternate day.

Project Folder Structure:

Before we start coding, let us look at the project folder structure. We create a project folder called – ‘Custom Cursors’. Inside this folder, we have an index.html file, a style.css file and six images. You can download these images with the source code at the end of this post.

HTML:

We begin with HTML. First, copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Cursors</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <button class="pizza">pizza</button>
      <button class="wand">wand</button>
      <button class="lipstick">lipstick</button>
      <button class="feather">feather</button>
      <button class="sword">sword</button>
      <button class="rocket">rocket</button>
    </div>
  </body>
</html>

CSS:

Next, we use CSS to apply the custom cursors. For this copy, the code provided to you below and paste it into your stylesheet. The right syntax to use urls with cursor is: ‘cursor: url(“file-name”),fallback-keyword;’.

When using images as cursor PNG and SVG image formats work the best. Also I would recommend you to use an image resolution of 32x32px. 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #4a77f4;
}
.container {
  background-color: #ffffff;
  width: 90%;
  max-width: 60em;
  padding: 5em 2em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 0.5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5em 2em;
}
.container button {
  font-family: "Poppins", sans-serif;
  font-size: 1.2em;
  background-color: #4a77f4;
  border: none;
  outline: none;
  color: #ffffff;
  padding: 0.8em;
  text-transform: capitalize;
  border-radius: 0.3em;
}
.pizza {
  cursor: url("pizza.png"), auto;
}
.wand {
  cursor: url("wand.png"), auto;
}
.lipstick {
  cursor: url("lipstick.png"), auto;
}
.feather {
  cursor: url("feather.png"), auto;
}
.sword {
  cursor: url("sword.png"), auto;
}
.rocket {
  cursor: url("rocket.png"), auto;
}

That’s it for this tutorial. Now you can go ahead and use images of your choice. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Also, if you have any queries, suggestions or feedback you can comment below.
Happy Coding!

Previous articleMCQ – 11/10/22
Next articleMCQ – 13/10/22
RELATED ARTICLES

Zombie CSS Art

Batman CSS Art

LEAVE A REPLY

Please enter your comment!
Please enter your name here

15 + 17 =

Most Popular