Kemudahan melompat ke informasi lain dengan menggunakan TOMBOL.
Dalam membuat sebuah tombol pada posting blog harus di perhatikan dari fungsi dari tombol tersebut adalah untuk mengarahkan pengunjung pada halaman konten tertentu.
Disini disajika cara menggunakan tombol dan perintah cara membuat tombol tersebut
Bagaimana cara membuat tombol di HTML? Membuat tombol sederhana sejatinya hanya dengan perintah pada HTML sebagai berikut
hasilnya sebagia berikut : Download
Bacalah contoh tombol sederhana ini dan belum di modifikasi atau ditambahkan link didalamnya.
Pada tutorial blog kali ini yang akan kita bahas adalah membuat tombol yang dapat ditambahkan link dan akan dimodifikasi sehingga terlihat tampilan yang sesuai dengan tema blog yang kita miliki.
Berikut kami sajikan beberapa contoh tombol sederhana namun terlihat keren dan unik seperti wordpress
1. Model Sederhana dengan link
untuk membuat tombol diatas anda hanya perlu menggunakan perintah
<a href="https://www.bacalah.biz/" ><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://www.bacalah.biz/" target="_blank"> ><button>Download</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
Download
untuk membuatnya masukkan kode berikut :
<button onclick="window.location= 'https://www.bacalah.biz'" 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.
Model dengan style dengan CSS
Bacalah ;
MEMBUAT TOMBOL SEPERTI INI
Langkah awal membuatnya adalah anda memasukkan CSS tombol terlebih dahulu di
Saya kira anda sudah tahu cara memasukkan CSS tombol tersebut ke dalam template blog yang anda miliki.
Cara memanggil tombol tersebut dapat dengan dengan cara berikut ini
/*tombol-tombolan*/
.pencet {display: inline-block;
padding: 8px 0px;
font-size: 16px;
margin-bottom: 5px;
width: 100%;
text-transform: uppercase;
outline: none;color: #fff;
background-color: #2770e7;
border: none;
text-align: center;
position: relative;
border-radius: 5px;
box-shadow: 0 5px #357ae8;
cursor: pointer;
font-weight: bold;}
.pencet:hover {background-color: #1553b9}
.pencet:active {background-color: #1553b9;
box-shadow: 0 5px #1553b9;
transform: translateY(4px);
-webkit-transition: all 0.3s;}
.pencet a:visited {color: #fff;
text-decoration: none;}
.pencet a:link {color: #fff;
text-decoration: none;
outline: none;
-webkit-transition: all 0.3s;}
Caranya sama seperti tadi anda setting seperti yang diatas. Mudah bukan?
Model dengan style dengan CSS MEMBUAT TOMBOL SEPERTI INI Langkah awal membuatnya adalah anda memasukkan CSS tombol terlebih dahulu di
/*tombol-tombolan*/
.pencet {display: inline-block;
padding: 8px 0px;
font-size: 16px;
margin-bottom: 5px;
width: 100%;
text-transform: uppercase;
outline: none;color: #fff;
background-color: #2770e7;
border: none;
text-align: center;
position: relative;
border-radius: 5px;
box-shadow: 0 5px #357ae8;
cursor: pointer;
font-weight: bold;}
.pencet:hover {background-color: #1553b9}
.pencet:active {background-color: #1553b9;
box-shadow: 0 5px #1553b9;
transform: translateY(4px);
-webkit-transition: all 0.3s;}
.pencet a:visited {color: #fff;
text-decoration: none;}
.pencet a:link {color: #fff;
text-decoration: none;
outline: none;
-webkit-transition: all 0.3s;}
Saya kira anda sudah tahu cara memasukkan CSS tombol tersebut ke dalam template blog yang anda miliki. Cara memanggil tombol tersebut dapat dengan dengan cara berikut ini
<button class="pencet" onclick="window.location= 'http://url yang akan dituju'"><b> Nama tombolnya</b></button>
Selamat mencoba
