How to Create a Custom Mouse Pointer in Showit Using CSS

If you want to make your Showit website stand out and reflect your unique style, you can consider creating a custom mouse pointer using CSS. By replacing the standard mouse cursor with a personalized design or icon, you can enhance the visual appeal and branding of your website.

You can have pointers that look like….




This tutorial will guide you through the step-by-step process of creating a custom mouse pointer in Showit

Whether you want to showcase your logo, add an interactive feature, or simply inject some creativity into your website’s navigation, this tutorial will provide you with the necessary steps to create a custom mouse pointer and make your Showit website truly one-of-a-kind.

Let’s get started!

Let’s begin with the first step: selecting your image

Feel free to choose your desired image for your custom mouse pointer. Ensure that the image you select is in the transparent PNG format. If you don’t have a specific PNG image in mind, don’t worry! You can explore a vast collection of PNG icons available on platforms like Flaticon. This way, you’ll have plenty of options to find the perfect icon for your custom mouse pointer.

Furthermore, consider selecting an additional image that complements your main image. This way, when users hover over clickable links, the mouse pointer will seamlessly transition to the selected image, adding an engaging and interactive element to your website. So, let your creativity flow and choose an image that harmonizes with your custom mouse pointer, delivering an enhanced user experience.

Step 2: Resizing Your Image

To ensure that your custom mouse pointer image fits perfectly, you will need to resize it to 24×24 pixels. Using an image editing tool like Photoshop, you can adjust the dimensions to 24×24 pixels. In case your image has varying height and width, you can set the longer side to 24 pixels.

If you are downloading the image from Flaticon, you can take advantage of the platform’s built-in function that allows you to directly download your image in the desired 24×24 size in PNG format.

Step 3: Implementing the Custom Mouse Pointer in Showit

After resizing your image to 24×24 pixels, upload it to the Showit media library. Follow these steps to add the custom mouse pointer functionality using custom CSS:

  1. Go to your Showit dashboard and navigate to the media library section.
  2. Click on the “Upload Media” button and select the resized PNG image file from your computer to upload it.
  3. Once the image is uploaded, find it in the media library. Hover over the image and click on the chain icon that appears.
  4. A prompt will appear, stating that the link has been copied. Make a note of this copied link.

Now, click on the Advanced Settings tab on the right pane of the ShowIt builder. Click on the Custom CSS box, and enter the following code:

  cursor: url('path/to/your/image.png'), auto;
body a:hover{
cursor:url('path/to/your/second-image.png'), auto;

Make sure to replace path/to/your/image.png with the file path or URL of your uploaded image, and replace path/to/your/second-image.png with the file path or URL of the second image you want to use when hovering over the element.


By following these steps, you will successfully implement the custom mouse pointer using the uploaded image in the Showit media library, and it will dynamically change to the second image on hover.

If you liked the post, share it with your fellow ShowIt designers and developers. You can leave a comment if you have questions/suggestions.

Follow me on Instagram

You may also like:

Create a Marquee Button in Showit in Three Simple Steps!

It's the little things that stand out. Marquee buttons do not only have a visual but also a functional impact. They look great, and can also fit a longer button text in one line instead of having you increase the size of the button to fit a 2 line CTA or button text...

Create a Button With a Hover Effect in Showit

A hover effect is one of the simplest and most basic styling and customization options for a button. Unfortunately, due to the system that is used in ShowIt builder to create buttons, this effect is not possible – well, at least not fully. If you are familiar with...

Create a Text Replacing Typing Effect in Showit (Typewriter Effect)

A typewriter effect, or a type effect is a very cool effect to have on your website. It gives your page that oomph and enhances the overall design of your page and improves the overall experience of the whole website. This tutorial will show you how you can easily...

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments