WEBTEKNOLOGI - Aplikasi perpesanan seperti WhatsApp menjadi salah satu alat komunikasi yang sangat penting bagi banyak orang. Tidak hanya digunakan untuk bertukar pesan teks, WhatsApp juga menawarkan fitur-fitur lain seperti panggilan suara, video, berbagi lokasi, dan lainnya.
Karena semakin banyaknya penggunaan WhatsApp, banyak situs web dan aplikasi yang menyediakan tombol atau tautan untuk memudahkan pengguna terhubung langsung ke WhatsApp mereka.
Dalam artikel ini, kita akan mempelajari bagaimana membuat tombol WhatsApp sederhana menggunakan HTML dan CSS.
Ini akan memungkinkan Anda dengan mudah menambahkan tombol WhatsApp ke situs web Anda, memungkinkan pengunjung untuk langsung terhubung dengan Anda melalui aplikasi WhatsApp.
Langkah 1: Struktur HTML
Pertama-tama, kita perlu membuat struktur HTML dasar untuk tombol WhatsApp. Ini akan terdiri dari tautan (link) yang akan mengarahkan pengguna ke WhatsApp. Berikut adalah contoh kodenya:
html
<a href="https://api.whatsapp.com/send?phone=+6282123456789" class="whatsapp-btn" target="_blank">
<i class="fab fa-whatsapp"></i> Hubungi Kami di WhatsApp
</a>
Dalam kode di atas, terdapat beberapa elemen penting:
1. `<a>`: Tag ini merupakan tag anchor yang digunakan untuk membuat tautan.
2. `href="https://api.whatsapp.com/send?phone=+6282123456789"`: Ini adalah URL yang akan mengarahkan pengguna ke percakapan WhatsApp Anda. Pastikan untuk mengganti nomor telepon dengan nomor Anda sendiri.
3. `class="whatsapp-btn"`: Kelas ini akan digunakan untuk menerapkan gaya CSS pada tombol.
4. `target="_blank"`: Atribut ini akan membuka tautan dalam tab baru.
5. `<i class="fab fa-whatsapp"></i>`: Ini adalah ikon WhatsApp yang akan ditampilkan pada tombol. Anda dapat menggunakan ikon Font Awesome atau ikon lainnya.
6. `Hubungi Kami di WhatsApp`: Ini adalah teks yang akan ditampilkan pada tombol.
Langkah 2: Gaya CSS
Selanjutnya, kita akan menambahkan gaya CSS untuk membuat tombol WhatsApp terlihat menarik dan sesuai dengan desain situs web Anda. Berikut adalah contoh kode CSS:
css
.whatsapp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #25D366;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
padding: 12px 24px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.whatsapp-btn i {
margin-right: 8px;
font-size: 20px;
}
.whatsapp-btn:hover {
background-color: #128C7E;
}
Dalam kode CSS di atas, kita melakukan beberapa hal:
1. `display: inline-flex;`: Ini membuat tombol menjadi elemen inline-flex, yang memungkinkan kita untuk menyejajarkan ikon dan teks.
2. `align-items: center;` dan `justify-content: center;`: Ini memastikan bahwa ikon dan teks terpusat secara vertikal dan horizontal dalam tombol.
3. `background-color: #25D366;`: Ini adalah warna latar belakang tombol, yang sesuai dengan warna resmi WhatsApp.
4. `color: #fff;`: Ini adalah warna teks, yang dalam hal ini adalah putih untuk kontras yang baik dengan latar belakang hijau.
5. `text-decoration: none;`: Ini menghilangkan garis bawah default pada tautan.
6. `font-size: 16px;` dan `font-weight: bold;`: Ini mengatur ukuran dan ketebalan teks.
7. `padding: 12px 24px;`: Ini menambahkan ruang internal pada tombol.
8. `border-radius: 4px;`: Ini membuat sudut tombol membulat.
9. `transition: background-color 0.3s ease;`: Ini menambahkan efek transisi yang halus saat warna latar belakang berubah saat pengguna mengarahkan kursor ke atas tombol.
10. `.whatsapp-btn i { margin-right: 8px; font-size: 20px; }`: Ini mengatur gaya untuk ikon WhatsApp.
11. `.whatsapp-btn:hover { background-color: #128C7E; }`: Ini mengubah warna latar belakang tombol saat pengguna mengarahkan kursor ke atas tombol.
Langkah 3: Menambahkan Ikon WhatsApp
Untuk menampilkan ikon WhatsApp pada tombol, Anda dapat menggunakan Font Awesome atau ikon lainnya. Jika Anda menggunakan Font Awesome, tambahkan tag `<link>` di bagian `<head>` HTML Anda:
html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
Setelah itu, Anda dapat menggunakan kelas `fab fa-whatsapp` pada elemen `<i>` di dalam tombol WhatsApp.
Contoh Lengkap
Berikut adalah contoh lengkap HTML dan CSS untuk tombol WhatsApp:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tombol WhatsApp</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
.whatsapp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #25D366;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
padding: 12px 24px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.whatsapp-btn i {
margin-right: 8px;
font-size: 20px;
}
.whatsapp-btn:hover {
background-color: #128C7E;
}
</style>
</head>
<body>
<a href="https://api.whatsapp.com/send?phone=+6282123456789" class="whatsapp-btn" target="_blank">
<i class="fab fa-whatsapp"></i> Hubungi Kami di WhatsApp
</a>
</body>
</html>
Dalam contoh di atas, Anda dapat melihat struktur HTML dan gaya CSS yang telah dijelaskan sebelumnya. Simpan file ini dengan ekstensi `.html` dan buka di browser untuk melihat hasilnya.
Tombol WhatsApp yang Anda buat sekarang siap digunakan untuk memudahkan user atau pelanggan langsung berkomunikasi dengan anda. (Webteknologi/Admin)
0 Komentar untuk "Buat Tombol Whatsapp Mudah Pakai Html dan Css"