Antara momen tombol ditekan dan dilepaskan, ada jendela waktu singkat yang biasanya diabaikan. Pseudo-class :active mengisi jendela itu: elemen berubah tampilan hanya selama sedang ditekan, memberi rasa bahwa kontrol benar-benar merespons tangan pengguna. Umpan balik sekecil ini yang membedakan antarmuka yang terasa hidup dari yang terasa beku. Pada chapter ini kita melihat kapan :active muncul, menyusun efek tekan untuk tombol, dan menempatkannya pada urutan state bersama :hover.

Kapan :active Muncul #

State :active dimulai saat aktivasi dimulai — untuk mouse, sejak tombol kiri ditekan — dan berakhir saat dilepaskan. Selama jendela sesaat itu, selector selector:active cocok dan gayanya berlaku. Setelah mouse dilepas, elemen kembali ke state sebelumnya: :hover bila kursor masih di atasnya.

Beberapa kejadian yang memicu :active:

  • Menekan dan menahan mouse pada tombol, tautan, atau elemen lain yang bisa diaktifkan.
  • Menahan tombol Spasi pada elemen yang sedang terfokus — di sebagian browser state ini ikut muncul.
  • Ketukan pada perangkat sentuh, selama jari masih menempel di layar.

Mirip :hover, state tekan juga menjalar ke elemen induknya: menekan teks di dalam tautan tetap memicu gaya a:active. Detail ini yang membuat efek tekan tetap terasa meski jari atau kursor mendarat sedikit meleset dari target.

Karena sesaat, :active paling efektif untuk perubahan kecil yang terasa, bukan perubahan besar yang perlu dibaca.

Umpan Balik Tekan pada Tombol #

Resep yang paling populer: tombol tampak “tenggelam” saat ditekan — bergeser turun sedikit sementara bayangan di bawahnya menyusut:

css 
.tombol-keranjang {
  background-color: #1f6f54;
  color: #fdfaf3;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  box-shadow: 0 3px 0 #0d3b2a;
}

.tombol-keranjang:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0d3b2a;
}

Mari kita telaah pasangan deklarasinya:

  1. box-shadow: 0 3px 0 #0d3b2a; pada state dasar: bayangan tanpa blur yang berfungsi sebagai “kaki” tombol.
  2. transform: translateY(2px);: menggeser seluruh tombol ke bawah tanpa memengaruhi tata letak di sekitarnya.
  3. box-shadow: 0 1px 0 #0d3b2a;: jarak bayangan menyusut seiring tombol turun, sehingga ilusi tekan konsisten.

Perhatikan bahwa pergeseran memakai transform, bukan position atau margin — elemen sekitar tidak ikut terdorong.

Tekan dan tahan tombol berikut untuk merasakan urutan state-nya — kursor di atas memicu :hover, tekanan memicu :active, dan pelepasan mengembalikan state dasar. Efeknya murni CSS tanpa JavaScript:

Posisi :active dalam Urutan State #

Pada chapter Styling Links kita sudah mengenal urutan LVHA: :link, :visited, :hover, :focus-visible, :active. Prinsip yang sama berlaku untuk tombol. :hover dan :active sama-sama cocok saat elemen ditekan dengan kursor di atasnya; karena specificity keduanya sama, aturan yang ditulis belakangan yang menang. Karena itu :active selalu ditulis setelah :hover agar gaya tekan tetap terlihat:

css 
.tombol-nav:hover {
  background-color: #14503a;
}

.tombol-nav:active {
  background-color: #0d3b2a;
  transform: translateY(1px);
}

Urutan penulisan menentukan siapa menimpa siapa — bukan urutan kejadian state.

Nuansa pada Perangkat Sentuh #

Pada layar sentuh, :active muncul selama jari menempel, tetapi browser biasanya menundanya sedikit untuk membedakan ketukan dari gestur gesek. Beberapa browser juga memicu efek tekan ketika jari mulai bergeser keluar elemen. Konsekuensinya: jangan menjadikan :active satu-satunya penanda keputusan penting, dan pasangkan selalu dengan :hover serta :focus-visible sesuai pola chapter sebelumnya.

Meski paling sering dipakai pada tombol dan tautan, :active secara teknis bisa dipasang pada elemen apa pun selama pointer menekannya — misalnya kartu yang menyusut sehalus 1% saat ditekan:

css 
.kartu-produk:active {
  transform: scale(0.99);
}

Namun tanpa peran interaktif yang jelas, efek semacam ini justru menyesatkan: elemen yang tidak bisa diklik sebaiknya tidak bereaksi seperti bisa. Simpan :active untuk elemen yang benar-benar dapat diaktifkan, dan bila elemen non-button ikut menanggapi tekan, lengkapi dengan cursor: pointer serta peran yang semestinya di HTML.

Ringkasan #

:active mencocokkan elemen hanya selama proses aktivasi — dari tekan hingga lepas — dan paling efektif sebagai umpan balik mikro seperti pergeseran kecil dan penyusutan bayangan. Kunci teknisnya adalah menuliskannya setelah :hover agar gaya tekan menang, dan memakai transform agar tata letak tidak terdorong. Setelah tiga state pointer selesai dibahas, chapter berikutnya beralih ke state milik kontrol form: :checked dan :disabled.