Dalam membuat website, HTML dan CSS merupakan dasar yang dapat membantu tim developer dalam membangun tampilan yang menarik. HTML berfungsi sebagai kerangka atau struktur yang menampung teks, gambar, tombol, ataupun berbagai elemen lain di halaman web. Sementara itu, CSS biasanya digunakan untuk memberikan style pada tampilan, mengatur tata letak, serta memberikan interaksi visual yang membuat website menjadi lebih responsif. Kombinasi antara HTML & CSS memungkinkan kita untuk menciptakan elemen Call to Action atau CTA yang lebih efektif untuk mengarahkan pengguna dalam melakukan tindakan tertentu pada website. 

CTA merupakan elemen penting dapat kita temukan pada website misalnya mulai tombol “Register”, “Purchase”, hingga “Save”. Pada dasarnya CTA yang baik tidak hanya memperhatikan kejelasan dari teks, tetapi juga harus mampu menarik perhatian pengguna. Di sinilah peran state atau kondisi visual pada tombol menjadi sangat krusial. Website yang memperhatikan perubahan state mampu meningkatkan user engagement. Hal ini dikarenakan jika tombol tidak memberikan respons apa pun saat disentuh atau diklik, pengguna dapat merasa ragu apakah aksinya sudah terdaftar atau belum. Respons visual ini dapat memberikan konfirmasi yang membuat pengalaman interaksi terasa lebih nyaman. Dengan kata lain, state styling bukan hanya tentang estetika tampilannya, tetapi juga menyangkut aspek aksesibilitas pada sebuah website. 

CSS dapat membantu kita dalam mengatur berbagai state pada elemen secara interaktif. Dalam CTA button, terdapat tiga state penting yang paling sering digunakan yakni hover, focus, dan active. Masing-masing dari state tersebut memiliki fungsi yang berbeda-beda dalam memberikan feedback visual sesuai kondisi interaksi pengguna. Dengan memanfaatkan state tersebut, sebuah tombol dapat terasa lebih interaktif dan mudah dipahami alurnya. 

Dalam penulisan code CSS, terdapat beberapa format code yang dapat dilakukan untuk mengatur tampilan state tersebut. Pertama kita akan membahas state hover. Jika cursor mengarah pada sebuah tombol, CSS hover dapat memberikan perubahan seperti warna latar, bayangan, atau transisi. Hal ini tentunya dapat membantu pengguna untuk mengetahui bahwa elemen tersebut dapat diklik. Contoh code CSSnya adalah sebagai berikut: 

button:hover { 

  background-color: #005eff; 

  cursor: pointer; 

} 

Selanjutnya adalah state focus dimana state tersebut biasanya muncul ketika pengguna menavigasi website menggunakan keyboard atau ketika sebuah tombol menjadi target input. Fokus dari state tersebut dapat dilihat melalui garis atau highlight yang memastikan pengguna tahu elemen mana yang sedang aktif. Contoh code CSSnya adalah sebagai berikut: 

button:focus { 

  outline: 2px solid #003fb3; 

} 

Kemudian yang terakhir adalah state active, dimana state tersebut dapat membantu pengguna untuk mengetahui elemen dalam kondisi ditekan. Perubahan visual pada state ini dapat memberikan kesan tombol merespons tindakan pengguna. Biasanya tampilan elemen dapat dibuat sedikit lebih gelap untuk memberikan kesan element tersebut telah di “klik”.Contoh code CSSnya adalah sebagai berikut: 

button:active { 

  transform: scale(0.97); 

  background-color: #004acc; 

} 

Apabila semua state ini dioptimalkan, CTA tersebut dapat memberikan pengalaman yang interaktif dan intuitif dimana pengguna bisa mendapatkan ‘sinyal’ visual untuk setiap tahap interaksi yang dilakukan. Sebagai kesimpulan, hover, focus, dan active bukan hanya sekadar tambahan estetika dalam desain interface website, melainkan juga suatu komponen penting dalam menciptakan CTA yang efektif. State tersebut dapat membantu pengguna untuk  memastikan bahwa setiap aksi yang dilakukan pengunjung website lebih jelas dan terkonfirmasi dengan baik. 

References :