10 Cara membuat Button Blogspot Responsive

Bacalah INFO - 10 Cara membuat Button Blogspot Responsive
Temukan bagaimana memahami dalam sebuah informasi seputar Kesehatan, Teknologi, Multimedia dan Aplikasi terapan
Untuk dipergunakan dalam keseharian hidup ini, simak detail .

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  ;

• Widget translate
• Menangkal HOAX 
• Tiori kreatif Seni 

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