Belajar CSS Bagian 30: Mengenal CSS Cursor Property

Pernahkah Anda mengarahkan kursor mouse ke sebuah tombol atau tautan, lalu bentuk kursor berubah menjadi ikon tangan? Dalam proses belajar CSS, perubahan kecil seperti ini penting dipahami karena dapat membantu pengguna mengenali bahwa sebuah elemen bisa diklik. Tampilan dan perilaku kursor tersebut dapat diatur menggunakan CSS Cursor Property.

Pada Belajar CSS bagian 29, kita telah membahas CSS Columns Property. Kali ini, kita akan melanjutkan pembahasan dengan mengenal CSS cursor property, mulai dari pengertian, fungsi, berbagai nilai cursor, hingga contoh penggunaannya pada HTML dan CSS.

Dengan memahami properti ini, Anda dapat mengatur tampilan kursor sesuai dengan fungsi elemen pada halaman website sehingga interaksi pengguna menjadi lebih mudah dipahami.

Apa Itu CSS Cursor Property?

CSS cursor property adalah properti CSS yang digunakan untuk menentukan tampilan kursor mouse ketika berada di atas suatu elemen. Dengan properti ini, developer dapat memilih ikon kursor bawaan browser (seperti tangan, tanda silang, atau tanda tunggu) maupun menggantinya dengan gambar buatan sendiri.

Kode dasarnya sebagai berikut:

selector {
  cursor: nilai;
}

Contoh paling sederhana:

a.tombol {
  cursor: pointer;
}

Fungsi CSS Cursor Property

Properti ini terlihat sepele, tetapi perannya cukup penting dalam pengalaman pengguna (UX):

1. Memberi petunjuk interaksi. Kursor pointer menandakan elemen bisa diklik, sedangkan text menandakan area yang bisa diketik atau diseleksi.
2. Menunjukkan status sistem. Kursor wait atau progress memberi tahu pengguna bahwa proses sedang berjalan.
3. Mencegah kesalahan. Kursor not-allowed menandakan aksi tidak tersedia, misalnya pada tombol yang dinonaktifkan.
4. Mendukung fitur drag and drop. Kursor grab, grabbing, dan move membuat interaksi terasa alami.
5. Memperkuat identitas visual. Custom cursor dapat menambah karakter pada website, misalnya untuk portofolio, landing page kreatif, atau game berbasis web.

Jenis-Jenis Nilai CSS Cursor

Berikut nilai-nilai cursor yang paling sering dipakai, dikelompokkan berdasarkan kegunaannya :

Umum

• auto : Browser menentukan kursor secara otomatis (nilai default)
• default : Kursor panah standar
• none : Menyembunyikan kursor

Tautan dan Status

• pointer : Ikon tangan, untuk elemen yang bisa diklik
• help : Tanda tanya, menandakan ada bantuan
• wait : Menunggu, browser tidak bisa berinteraksi
• progress : Proses berjalan, tetapi pengguna masih bisa berinteraksi
• context-menu : Menandakan menu konteks tersedia

Seleksi

• text : Kursor I-beam untuk teks
• vertical-text : Kursor teks untuk tulisan vertikal
• cell : Untuk memilih sel, misalnya pada tabel atau spreadsheet
• crosshair : Tanda plus untuk seleksi presisi

Drag and Drop

• grab : Tangan terbuka, elemen bisa digenggam
• grabbing : Tangan menggenggam, elemen sedang di-drag
• move : Elemen bisa dipindahkan
• copy : Aksi akan menyalin item
• alias : Aksi akan membuat pintasan
• no-drop : Item tidak bisa dijatuhkan di sini
• not-allowed : Aksi tidak diizinkan

Zoom

• zoom-in : Ikon kaca pembesar (+)
• zoom-out : Ikon kaca pembesar (?)

Membuat Custom Cursor dengan CSS

Selain kursor bawaan, CSS memungkinkan kita untuk memakai gambar atau icon sendiri melalui fungsi url().

Contoh 1: Kursor Emoji Roket (tanpa file gambar), kodenya :

a, button {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext y='26' font-size='26'%3E?%3C/text%3E%3C/svg%3E") 4 4, auto;
}

Contoh 2: Kursor dari File Gambar, kodenya :

.area-gambar {
  cursor: image-set(
    url("kursor-pena.png") 1x,
    url("kursor-pena@2x.png") 2x
  ) 2 30, crosshair;
}

Dengan image-set(), browser memilih gambar sesuai kerapatan piksel layar sehingga kursor tetap tajam di layar beresolusi tinggi. Karena dukungan image-set() pada properti cursor bisa berbeda antarbrowser, fallback crosshair di atas sangat disarankan.

Tips Untuk Custom Cursor

Berikut beberapa tips untuk melakukan custom cursor agar hasilnya lebih menarik.

• Selalu sertakan fallback. Kursor kustom bisa gagal dimuat, jadi tutup dengan nilai bawaan seperti auto atau pointer.
• Jangan berlebihan. Kursor kustom yang terlalu mencolok bisa mengganggu fokus. Gunakan seperlunya.
• Jaga kontras. Pastikan kursor terlihat jelas di atas latar terang maupun gelap.
• Pertahankan makna kursor standar, Pengguna sudah terbiasa bahwa tangan berarti “bisa diklik”, berarti mengubah maknanya dapat membingungkan pengguna.
• Uji di banyak browser. Perilaku kursor kustom, terutama untuk image-set() dan ukuran besar, bisa sedikit berbeda antar browser.

Contoh Implementasi CSS Cursor pada HTML

Berikut contoh halaman dengan kode HTML yang menampilkan beberapa jenis kursor.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo CSS Cursor Property</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #0f172a;
      color: #e2e8f0;
      padding: 2rem;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 1rem;
    }
    .kotak {
      padding: 1.5rem 1rem;
      text-align: center;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      transition: transform .2s, border-color .2s;
    }
    .kotak:hover {
      transform: translateY(-4px);
      border-color: #38bdf8;
    }

    .pointer     { cursor: pointer; }
    .text        { cursor: text; }
    .wait        { cursor: wait; }
    .help        { cursor: help; }
    .crosshair   { cursor: crosshair; }
    .grab        { cursor: grab; }
    .grab:active { cursor: grabbing; }
    .disabled    { cursor: not-allowed; opacity: .6; }
    .zoom        { cursor: zoom-in; }

  </style>
</head>
<body>
  <p>Arahkan mouse ke setiap kotak untuk melihat perubahan kursor.</p>

  <div class="grid">
    <div class="kotak pointer">pointer</div>
    <div class="kotak text">text</div>
    <div class="kotak wait">wait</div>
    <div class="kotak help">help</div>
    <div class="kotak crosshair">crosshair</div>
    <div class="kotak grab">grab (coba klik tahan)</div>
    <div class="kotak disabled">not-allowed</div>
    <div class="kotak zoom">zoom-in</div>
  </div>
</body>
</html>

Simpan sebagai index.html, lalu buka di browser dan hasilnya akan seperti berikut :

Dari hasil di atas, ketika cursor menghover ke container div maka secara otomatis akan berganti sesuai dengan jenis cursor yang digunakan.

Penutup

CSS cursor property mungkin terlihat seperti detail kecil, tetapi penggunaannya dapat membantu memberikan petunjuk interaksi yang lebih jelas pada website. Dengan memahami berbagai nilai cursor, Anda dapat menyesuaikan tampilan kursor berdasarkan fungsi setiap elemen, termasuk membuat custom cursor untuk kebutuhan tertentu.

Mulailah dari nilai sederhana seperti pointer dan not-allowed, kemudian eksplorasi nilai lainnya sesuai kebutuhan. Jika sedang belajar CSS, jangan berhenti sampai di bagian ini. Lanjutkan mengikuti seri Belajar CSS Rumahweb Journal untuk mempelajari berbagai properti dan teknik CSS lainnya secara bertahap.

Semakin banyak konsep yang dipahami dan dipraktikkan, semakin mudah bagi Anda untuk membuat tampilan website yang rapi, responsif, dan sesuai kebutuhan.