Pada kali ini kita akan belajar membuat button yang menarik menggunakan HTML dan Tailwind CSS untuk membangun projek website yang modern.
Pertama kita perlu membuat tag HTML sederhana terlebih dahulu untuk hyperlink yang akan kita jadikan sebuah button
<a href="#" class="">
View Profile
</a>Kodingan HTML di atas tersedia class untuk komponen tersebut dan belum kita berikan styling menggunakan Tailwind CSS, kita akan memberikan property seperti:
- panjang
- lebar
- warna background
- tingkat radius corner
- efek hover ketika disorot cursor
<a href="#" class="font-bold text-white bg-orange-400 rounded-full px-5 py-3">
View Profile
</a>Saya akan menjelaskan fungsi setiap class name yang digunakan di atas sebagai berikut:
- font-bold digunakan untuk menjadikan text pada button tersebut menjadi lebih tebal sehingga mudah dilihat pengguna
- text-white untuk menjadikan warna text menjadi warna putih karena kita menggunakan warna background orange sehingga lebih mudah dibaca
- bg-orange-400 artinya adalah kita mengatur tersebut memiliki background berwarna orange dengan angka 400 sehingga warnanya di antara terang dan gelap
- rounded-full kita butuhkan untuk mengatur button tersebut berbentuk halus pada setiap sudutnya
Pada button tersebut kita tidak mengatur lebar dan tinggi secara manual dengan angka yang pasti, namun kita menggunakan padding untuk mengatur lebar dan tinggi dari button tersebut. Mengapa demikian? agar lebarnya menjadi lebih responsive sesuai dengan panjang dari text pada button tersebut.
Maka berikut hasil dari pembuatan button sejauh ini:
Selanjutnya kita perlu menambahkan sedikit interaksi agar meningkatkan user experience ketika pengguna menyorot button tersebut maka akan berubah warna sehingga berbeda dengan komponen lainnya menggunakan kode berikut:
<a href="#" class="hover:bg-indigo-950 font-bold text-white bg-orange-400 rounded-full px-5 py-3">
View Profile
</a>Jika kita lihat di atas maka saya baru saja menambahkan hover:bg-indigo-950 yang berarti ketika di-hover atau sorot maka warnanya berubah menjadi indigo, kamu bisa cobain save projeknya lalu lihat hasilnya pada browser favoritmu.
Selanjutnya kita belajar Tailwind CSS tentang apa lagi ya? saranin langsung ke BuildWithAngga ya melalui Instagram.
