Subin's Blog

Peace ☮️, Love 💙, Freedom 🕊 & Curiosity 👨‍💻

CSS and Cursors CSS mouse cursor effects with DEMO

CSS, HTML

Read {count} times since 2020

Table of Contents
Ever wanted to change the cursor in your web page ? Well you can change it in CSS. There is a way of doing that, the cursor propery.
There is a way in CSS to change the cursor to pointer,cursor,resize,normal etc…..
This table show what will be the cursor when the value of cursor property changes as following.

  <td width="50%">
    <b><u><span style="font-family: inherit;">Cursor</span></u></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <span style="color: black;"><span style="font-family: inherit; font-size: small;"><b>Not-allowed,default,inherit,initial,no-drop,vertical-text</b></span></span>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">all-scroll</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">col-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">crosshair</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">e-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">ew-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">help</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">move</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">n-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">none</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">ne-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">nesw-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">ns-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">nw-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">nwse-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">pointer</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">Progress,wait</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">row-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <div align="LEFT">
      <span style="color: black;"><span style="font-family: inherit; font-size: small;"><b>s-resize</b></span></span>
    </div>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <div align="LEFT">
      <span style="color: black;"><span style="font-family: inherit; font-size: small;"><b>se-resize</b></span></span>
    </div>
  </td>
  
  <td id="vattu" width="50%">
    <b><span style="font-family: inherit;"><br /> </span></b>
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <div align="LEFT">
      <b><span style="font-family: inherit;">sw-resize </span></b>
    </div>
  </td>
  
  <td id="vattu" width="50%">
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">text</span></b>
  </td>
  
  <td id="vattu" width="50%">
  </td>
</tr>

<tr valign="TOP">
  <td width="50%">
    <b><span style="font-family: inherit;">w-resize</span></b>
  </td>
  
  <td id="vattu" width="50%">
  </td>
</tr>
Value