<div id="wrap">
     <h1>Ejemplos de cursores con imágenes personalizadas</h1>
     <p>(pasa el ratón por encima de los botones)
     <p><button class="custom-cursor">imagen con posición predterminada</button></p>
     <p><button class="custom-cursor-alt">imagen con posición <code>32 32</code></button></p>
  <h2>Algunos ejemplos genéricos</h2>
  <p><button class="pointer">cursor: pointer</button></p>
  <p><button class="crosshair">cursor: crosshair</button></p>
</div>

body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #eee;
}

#wrap {
  width: 80%;
  margin: 1em auto;
  padding: 1em 5%;
  background: #fff;
}

h1, h2 {
  margin-bottom: .5em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.6em;
}

p {
  margin-bottom: 1em;
}

.custom-cursor {
  cursor: url("//cybmeta.com/wp-content/uploads/2015/06/hal-angry-birds-cursor.png"),
    pointer;
}

.custom-cursor-alt {
  cursor: url("//cybmeta.com/wp-content/uploads/2015/06/hal-angry-birds-cursor.png") 32 32,
    pointer;
}

.pointer {
  cursor: pointer;
}

.crosshair {
  cursor: crosshair;
}