Bagaimana cara membuat tombol di HTML?
Membuat tombol sederhana sejatinya hanya dengan perintah pada HTML sebagai berikut
<button>...isi dengan nama yang dikehendaki..</button>
hasilnya sebagia berikut :
Tombol-ku
Itu contoh tombol sederhana dan belum di modifikasi atau ditambahkan link didalamnya. Pada artikel kali ini yang akan kita bahas adalah membuat tombol yang dapat ditambahkan link dan akan dimodivikasi sehingga menghasilkan tampilan yang sesuai dengan template blog yang kita miliki. Berikut kami sajikan beberapa contoh tombol sederhana namun tidak terlalu mengecewakan.
1. Model Sederhana dengan link
Tombol-ku
untuk membuat tombol diatas anda hanya perlu menggunakan perintah
<a href="https://isi blog anda.com/" ><button>Tombol-ku</button></a>
Bagian warna merah anda ganti dengan link yang akan anda tuju sedang bagian biru anda ganti dengan tulisan yang ingin anda tampilkan
Mudah bukan?
2. Model Sederhana dengan Link yang dibuka pada halaman baru
Tombol-ku
untuk membuat tombol diatas anda hanya perlu menggunakan perintah
<a href="https://isi blog anda.com/" target="_blank"> ><button>Tombol-ku</button></a>
Penambahan perintah target blank akan menjadikan tombol tersebut saat di tekan (klik) akan membuka alamat yang dituju pada tab baru.
Seperti tadi, bagian warna merah anda ganti dengan link yang akan anda tuju sedang bagian biru anda ganti dengan tulisan yang ingin anda tampilkan
kurang menarik?
3. Model dengan style sederhana dengan perubahan pada later
Tombol-Ku
untuk membuatnya masukkan kode berikut :
<button onclick="window.location=
'http://isi blog anda.com'"
style="background-color: #357ae8;
color: #fff;
height: 35px; width: 150px;">
<b>
Tombol-Ku
</b>
</button>
Perubahan pada warna latar belakang di tunjukkan dengan adanya menu style. Selain itu penempatan struktur kodenya berubah menggunakan button on click agar dapat dimasukkan menu style dan warna oranye dapat di atur sesuai dengan keinginan anda.
0 komentar:
Posting Komentar