Intro

Simply change your normal cursor to Cool Cursor.

Welcome to notAcursor project, a library that allows you to easily transform your ordinary cursor into something extraordinary. With notAcursor, you can personalize your cursor to reflect your style and creativity. Whether you prefer a sleek and minimal design or something more vibrant and eye-catching, notAcursor has got you covered.

Getting started with notAcursor is a breeze. Just follow our simple installation guide, and you'll be on your way to enjoying a customized cursor experience. Feel free to explore the various options and features available, and make your cursor truly unique.

Installation


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notacursor@0.0.8/notacursor.css"> css cdn preview
<script src="https://cdn.jsdelivr.net/npm/notacursor@0.0.8/notacursor.js"></script> css js preview
type-1 preview <!-- notAcursor-type1 -->
<div class="notAcursor-dot-type1" data-notacursor-dot></div>
<div class="notAcursor-outline-type1" data-notacursor-outline></div>
type-1 preview <!-- notAcursor-type2 -->
<div class="notAcursor-dot-type2" data-notacursor-dot></div>
<div class="notAcursor-outline-type2" data-notacursor-outline></div>
type-1 preview <!-- notAcursor-type3 -->
<div class="notAcursor-dot-type3" data-notacursor-dot></div>
<div class="notAcursor-outline-type3" data-notacursor-outline></div>
type-1 preview <!-- notAcursor-pic -->
<div class="notAcursor-dot-pic" data-notacursor-dot></div>
<img src="your_pic.png" alt="Cursor Image" class="notAcursor-outline-pic" data-notacursor-outline>
type-1 preview <!-- notAcursor-minecraftSword -->
<div class="notAcursor-dot-minecraftSword" data-notacursor-dot></div>
<img src="https://ik.imagekit.io/iamovi/notAcursor/minecraft-sword.png?updatedAt=1701079351519" alt="Cursor Image" class="notAcursor-outline-minecraftSword" data-notacursor-outline>
type-1 preview <!-- notAcursor-apple -->
<div class="notAcursor-dot-apple" data-notacursor-dot></div>
<img src="https://ik.imagekit.io/iamovi/notAcursor/apple.png?updatedAt=1701079346488" alt="Cursor Image" class="notAcursor-outline-apple" data-notacursor-outline>
Code Copied! You may use.

Quick start -

<!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="https://cdn.jsdelivr.net/npm/notacursor@0.0.8/notacursor.css">    
    <style>
      button {
          background-color: aquamarine;
          cursor: pointer;
          display: block;
          border: 1px solid black;
          margin: auto;
          margin-top: 150px;
          padding: 10px;
      }
      button:hover {
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <!-- cursor -->
    <div class="CursorX-dot-type1" data-cursor-dot></div>
    <div class="CursorX-outline-type1" data-cursor-outline></div>

    <!-- cursor -->
    <!-- <div class="CursorX-dot-type2" data-cursor-dot></div>
    <div class="CursorX-outline-type2" data-cursor-outline></div> -->

    <button>Test ME!</button>

    <script src="https://cdn.jsdelivr.net/npm/notacursor@0.0.8/notacursor.js"></script>
  </body>
</html>