Cara Membuat Tombol Button Link Pada Postingan Blog

 Cara Membuat Tombol Button Link Pada Postingan Blog

Tombol di sebuah posting selain berfungsi sebagai pemanis juga bisa pula berfungsi sebagai alat untuk mempermudah navigasi pengunjung dalam mendownload sebuah konten. Cara membuat tombol sebenarnya sangat bermacam-macam.

Di bawah akan kami sajikan beberapa cara yang biasa digunakan dalam membuat sebuah tombol pada posting blog, fungsi dari tombol tersebut adalah untuk mengarahkan pengunjung pada halaman konten tertentu. Kami sajikan tombol dan perintah cara membuat tombol tersebut

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 :

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

untuk membuat tombol diatas anda hanya perlu menggunakan perintah

<a href="https://www.candrajunie.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

untuk membuat tombol diatas anda hanya perlu menggunakan perintah

<a href="https://www.candrajunie.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

untuk membuatnya masukkan kode berikut :

    <button onclick="window.location=
    'http://candrajunie.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.Model dengan style dengan CSS

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>

Caranya sama seperti tadi anda setting seperti yang diatas.
Mudah bukan?