8 Style Cara Membuat Tombol Link Keren Responsive Di Blog

Sebuah artikel sering kali kita butuhkan ketika membuat link yangmengarah ke suatu tempat tujuan yang di tentukan kita, yang bertujuan untuk membuat pengunjung blog menjadi lebih mudah dalam berselancar di blog kita.

Dalam masalah ini, dengan blog menyediakan berbagai kemudahan berselancar di blog, itu termasuk menarik pengunjung blog dan akhirnya terus berkunjung di blog kita, jadi kita perlu menambahkan link yang dibutuhkan dalam artikel misalkan link demo tempelate, atau link download dll.

Tetapi pasti kita bosan dengan tampilan link yang begitu begitu saja, tidak menarik, jadi sekarang saya akan memberikan tutorial membuat tombol untuk link di positingan blog, dengan berbagai style css dan html.

Berikut cara pasang tombol link :

1.  Masuk ke blog, dan buat postingan, ingat pilih metode HTML jangan COMPOSE.
sisipkan kode html di bawah ini di mana anda ingin menggunakan tombolnya  :

<div class="btOutIsmynr">
     <a class="btInIsmynr1" href="#" target="_blank" title="Klik Disini">Ini Tulisan Tombolnya</a>
</div>

Pada tulisan "Ini Tulisan Tombolnya" HTML diatas, ganti saja sesuai yang anda inginkan, Setelah itu masuk ke Tempelate ==> Edit HTML, copy CSS style di bawah ini untuk dasar dari div out nya:

@import url('https://fonts.googleapis.com/css?family=Kanit');
.btOutIsmynr{margin:10px auto;clear:both;text-align:center}

Lalu setelah di copy code CSSnya, Pastekan di atas code </style>

2.  Selanjutnya anda pilih saja style dibawah ini dulu

/* Button 1  */
a.btInIsmynr1{margin:3px;height:30px auto;padding:5px 10px;color:#006894;background-color:#fff;border:3px solid #006894;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;transition:all 0.2s ease;line-height:1.6;font-size:16px;font-family:'Kanit',sans-serif}
a.btInIsmynr1:hover{background-color:#006894;color:#fff}
@media only screen and(max-width:720px){btInIsmynr1:width:95%}

/* Button 2  */
a.btInIsmynr2{margin:3px;height:30px auto;padding:5px 10px;color:#fff;background-color:#006894;border:3px solid #006894;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;transition:all 0.2s ease;line-height:1.6;font-size:16px;font-family:'Kanit',sans-serif}
a.btInIsmynr2:hover{background-color:#fff;color:#006894}
@media only screen and(max-width:720px){btInIsmynr2:width:95%}

/*    Button 3  */
a.btInIsmynr3{margin:3px;height:30px auto;padding:5px 10px;color:#fff;background-color:#006894;border:3px solid #006894;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;line-height:1.6;font-size:16px;font-family:'Kanit',sans-serif;box-shadow:4px 5px 0 #003166;border-radius:20px;position:relative}
a.btInIsmynr3:hover{top:2px;left:2px;box-shadow:2px 2px 0 #003166}
@media only screen and(max-width:720px){btInIsmynr3:width:95%}

/* Button 4*/
a.btInIsmynr4{margin:3px;height:30px auto;padding:10px 15px;color:#fff;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;line-height:1.6;font-size:16px;font-family:'Kanit',sans-serif;background:-webkit-linear-gradient(left,#34495e 0%,#34495e 50%,#006894 50%);background:-moz-linear-gradient(left,#34495e 0%,#34495e 50%,#006894 50%);background:-ms-linear-gradient(left,#34495e 0%,#34495e 50%,#006894 50%);background:-o-linear-gradient(left,#34495e 0%,#34495e 50%,#006894 50%);background:linear-gradient(to right,#34495e 0%,#34495e 50%,#006894 50%);background-size:200% 100%;background-position:100% 0;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s}
a.btInIsmynr4:hover{background-position:0 0}
@media only screen and(max-width:720px){btInIsmynr4:width:95%}

/*    Button 5  */
.btInIsmynr5{background:#fff;color:#006894;position:relative;height:30px auto;margin:3px;height:30px auto;padding:8px 13px;text-decoration:none;overflow:hidden;text-align:center;line-height:1.6;font-size:16px;font-family:'Kanit',sans-serif;border:3px solid #006894}
.btInIsmynr5:hover:after{background-position:0 0}
.btInIsmynr5:after{content:"";background:-webkit-linear-gradient(left,#f39c12 0%,#006894 50%,#006894 50%,#006894 100%);background:linear-gradient(to right,#f39c12 0%,#f39c12 50%,#006894 50%,#006894 100%);background-position:100% 0;background-size:200% 100%;width:100%;height:5px;position:absolute;top:100%;left:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-ms-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s}
@media only screen and(max-width:720px){btInIsmynr5:width:95%}

/*    Button 6  */
a.btInIsmynr6{margin:3px;height:30px auto;padding:5px 10px;color:#2980b9;background-color:#f4f4f4;border:3px solid #f4f4f4;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;line-height:1.6;font-size:16px;transition:all 0.3s ease;font-family:'Kanit',sans-serif;position:relative}
a.btInIsmynr6:hover{box-shadow:3px 3px 10px #999999;transition:all 0.3s ease}
@media only screen and(max-width:720px){btInIsmynr6:width:95%}

/*    Button 7  */
a.btInIsmynr7{margin:3px;height:30px auto;padding:5px 10px;color:#fff;background-color:#006894;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;transition:all 0.2s ease;line-height:1.6;font-size:16px;font-family:'Kanit',sans-serif}
a.btInIsmynr7:hover{background-color:#34495e;color:#fff}
@media only screen and(max-width:720px){btInIsmynr7:width:95%}

3.  Cara Memasang Tombol Di Postingan Blog
Selanjutnya bagaimana cara pasangnya ??? di setiap style button di atas memiliki class yang berbeda, jadi anda hanya mengubah html yang tadi di paste di postingan itu di ganti saja class yang sama persis dengan style di atas, misalnya :

Dari style di atas saya memilih /* Button 6 */  pada cssnya, pada button 6 class cssnya adalah btInIsmynr6  lihat di bawah :

/*    Button 6  */
a.btInIsmynr6{margin:3px;height:30px auto;padding:5px 10px;color:#2980b9;background-color:#f4f4f4;border:3px solid #f4f4f4;float:none;display:inline-block;text-decoration:none;overflow:hidden;text-align:center;line-height:1.6;font-size:16px;transition:all 0.3s ease;font-family:'Kanit',sans-serif;position:relative}
a.btInIsmynr6:hover{box-shadow:3px 3px 10px #999999;transition:all 0.3s ease}
@media only screen and(max-width:720px){btInIsmynr6:width:95%}

Lalu pada HTML nya, anda ganti saja CLASS nya sama persis dengan css yang sudah anda pilih style nya tadi, contohnya :

<div class="btOutIsmynr">
    <a href="#" class="btInIsmynr1" title="Klik Disini" target="_blank">Lorem ipsum dolor sit amet,</a>
</div>

Nah pada tulisan class="btInIsmynr1" ganti saja dengan class pada css yang sudah kita pilih class="btInIsmynr6" jadi cukup ganti nomornya saja.

Nanti style yang sudah di pilih berarti yang /* Button 6 */ , pastekan saja di bawah css yang sudah kita tambahkan pada awal postingan ini, kalo bingung lihat vidio dibawah :

Jika ingin merubah ukuran/warna pada CSS jika tidak sesuai, lihat keterangan di bawah :

• Merubah ukurannya ==> pada code a.btInIsmynr (tanpa hover): ubah pada ukuran height dan padding 
• Merubah warna background ==> cari code background-color yang ada ( # ) pasti itu kode hexa warnanya, ubah misalkan #fff jadi #0000000
• Merubah warna huruf ==> cari code color yang ada ( # ) sama seperti mengubah background
• Merubah font ==> cari saja code font-family ganti saja code setelahnya, misalkan font-family:'Kanit',sans-serif; Ganti fontnya sesuai dengan blog anda misalkan jadi 'droid serif' atau arial 

tag :

cara membuat tombol link html

cara menggunakan button dalam blog

membuat button link dalam postingan blog 

membuat tombol di postinan blog 

cara membuat tombol submit di html

membuat link keren di blog

style css pada blog

cara membuat button pada blogger

link button css dan html