<div class="padding-lg">
  <a class="custom-cursor" href="#0">
    <img class="block width-100%" src="https://images.unsplash.com/photo-1603123853880-a92fafb7809f?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt="Cool dog">
  </a>
</div>
// 💡 How to create a custom cursor in CSS
// 🔗 https://codyhouse.co/nuggets/custom-cursor

.custom-cursor {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctitle%3Ecursor-link%3C/title%3E%3Cg%3E%3Ccircle cx='32' cy='32' r='30' opacity='.8'%3E%3C/circle%3E%3Cpath d='M30.828 28.172l-.585-.586a2 2 0 0 1 0-2.828l6.171-6.171a2 2 0 0 1 2.828 0l6.171 6.171a2 2 0 0 1 0 2.828l-6.171 6.171a2 2 0 0 1-2.828 0l-.586-.585' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/path%3E%3Cpath d='M33.172 35.828l.585.586a2 2 0 0 1 0 2.828l-6.171 6.171a2 2 0 0 1-2.828 0l-6.171-6.171a2 2 0 0 1 0-2.828l6.171-6.171a2 2 0 0 1 2.828 0l.586.585' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/path%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M27 37l10-10'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") 32 32, pointer;

  // 👇 PNG fallback
  cursor: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAAFGUlEQVR4nO1bS0gcSRj+KwbDLhMRI1kciQQWnFMuu7koHgLi0YsefCCCHuaoCHsQD74O4kEUPc5BD4qPg148quBBEDTJdRkhEAwzQ4LKYIaESKSWv6nqLXu6p19V3TOZ+WBw1O6/6/v7+x9VXU0opVDOeFTW7AHgseoLEEKaAeA1AODPKAD8ZXPKewBIA8AFALyllF4oHZ+KECCEvAEA/on4NJcDgGP8UEqPJQ1RhzQHEEKeAkAfAHQCQIMUo/nIAMA+AGxRSr/KMCjFAYSQOAD0S7jbToGq2KSUJnyP3Y8DCCF/A8C0wjtuB1TENKX0nVcDnhzA5B5nki8GbAFAwktYuHYAIQQz+QLL6sUErBb/UErTyhzASloiwFh3C8wNcTel03EjVALkgY0twcbqCI4cUCLkOVw5wTYEWMxvlgh5ERgO/XY5oaACWLZfKEHywMa8wDhYwi4E4kWY7d2gmXGwhKUDWJNTLHXeD/oYF1NY5gBCyH6IHZ5sZCilnWY2TRXAevvAydfX11ctLi5GU6nUq7Ozs+aRkZFnkkw3ME55yFMASxr7QSc+JH9ychKLxWK/iX/f29u77u7u/ijhElgVOo3tspkC+sIkn0wmv7e2tv47NTX1Cf/X1dX1bHd396WEy0TMcpqZAgKNfSP5tra25NXV1T3+D0NgeXlZIy9JCXm54IEC2EpOUZBHrKysXI+OjmqkJSmhgXHUYQyBN/nnqIEdeYVOCN8BTslzSHaCuQPY5CGQ5Le9vf3SKXkOoxN8lMiIOFESFfDao0FXiMVi1e3t7bW5XO7eKXkOdAKvDgMDA356BJ2r6IBAev66ujrtWcTt7e29kTyGxuHh4Z+rq6svrM4/ODjAeg6NjY1PfAzDVAFRHwYd4/T09Fs6nb6LRqPVk5OTz/l5PC+gOpqamqrN7OExa2trWvzv7Oxc+xiGzlV0gN0TG89A2be0tPzOzx8fH9dkXFtb+xhMkmJvb29evTceMzc399nHkHSueiNECHkrmzgOGhMe3lX8He88kl9fX8+Kx9hVBLdVwwkopVoeUOYAcdCY8DDmUfbsWu/CJA+CA5Q8HLUaNMa8leyDJC9CugL8EMOpcDab/Tk7O/tFNXklIeD3rlJKtZUbzBU1NTVVkUikStWd5w6QtkFChqQHBwc/8BKJ5I+OjrIqyIuQogC/sh8bG2tA8rw6YMm8ubn5mUwm76QxNcBMAe+9GpuYmPjDLlat+n+Mefw5Pz+vd3/YLKkkL3IVHeDqoaKInp4erS8fGhr6aCXXy8vLOzNJY8LjshebJcXQuYpl0PNenFQq9QMJdHR0RPDumR0zPDz8yezvGBqY8PA7yj4gB+hcRQV4zgEbGxtaXz4zM/PCzTSV5wWe8BTLXoTO9cGaICHk2OuaAC5S4Dwdv+O8HaeuhY4PosmxQI5Sqi+KGMug511YuGCJC5f4HRcyCykhRPJg5CjNAeDQCSGTh4IOYPvwMn6sF3JCEZDPGPcamnWC+36vYnQCToKwxIVMHsy4KX00JiZGjhDJO3s0xg7YlHFFVAJWhPPz86/Y7CwtLWVCIg9sY2XeNrrK4/ECJ02rG0/gsORi6QC2/XTrFyC/VWgrrd16QMLPHKEIcME4WKKyTc7OCjMQZwZLBXzLrO0U39GSGNt7WypOcLVf2PGaYIk4Qd1mafjfCf1FmhgvWMy7GlvlhYnKKzOVl6Yqr83JsPPQaDm+OGl5gXJ8dbaUUN5vjwPAfz2vBz0d3cIRAAAAAElFTkSuQmCC") 1x, url("data:image/png;base64,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") 2x) 32 32, pointer;
}
View Compiled

External CSS

  1. https://unpkg.com/codyhouse-framework/main/assets/css/style.css
  2. https://codepen.io/codyhouse/pen/oNxLjqp

External JavaScript

This Pen doesn't use any external JavaScript resources.