Example of how to use emoji images for cursor property

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #eee;
        text-align: center;
      }
      button {
        display: inline-block;
        background-color: #1c87c9;
        color: #eee;
        margin: 25px;
        position: relative;
        width: 140px;
        height: 45px;
        border-radius: 3px;
        border: none;
        font-size: 1.5em;
        text-align: center;
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #999;
      }
      button:hover {
        background-color: #999;
        color: #ffcc00;
      }
      #happy {
        cursor: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), auto;
      }
      #sad {
        cursor: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto;
      }
      #love {
        cursor: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>What is your impression of our website?</h2>
    <button id="happy">Happy</button>
    <button id="sad">Sad</button>
    <button id="love">Love</button>
  </body>
</html>