Button pada blog memiliki fungsi sebagai link, menuju halaman tertentu dalam sebuah blog. Baik itu menuju halaman internal blog sendiri, ataupun menuju halaman eksternal blog lain. Dan penggunaan untuk button ini, sering sekali dilakukan. Karena dalam menulis sebuah artikel, untuk membuat sebuah panduan tertentu terkadang kita sebagai seorang blogger harus memberikan sebuah demo atau contohnya. Disinilah button ini sering digunakan.

Baca Juga: CARA MEMBUAT MENU DROPDOWN BERTINGKAT KEREN DI BLOG

Buttton ini dimanfaatkan untuk menggantikan tombol link biasa, menjadi lebih menarik dilihat oleh pengunjung blog. Karena pengunjung akan lebih tertarik dengan tombol-tombol unik pada sebuah blog.

Contoh buttonnya nanti

Untuk menghias dan membuat tombol button yang ada pada blog kita menjadi keren, ternyata sangat mudah sekali. Kita bisa memodifikasi tombol button di blog kita, dengan menambahkan kode css pada template yang kita gunakan.

Berikut ini cara mudah, untuk membuat tombol button pada blog kita menjadi keren. Silakan kamu copy code css dibawah ini, dan letakan tepat diatas ]]></b:skin> atau </style>.

p { color: #f1c40f; font-size: 1.2rem; width: 100%; padding: 20px; text-align: center; } .btn { box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 2px solid #e74c3c; border-radius: 0.6em; color: #e74c3c; cursor: pointer; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; font-size: 1rem; font-weight: 400; line-height: 1; margin: 20px; padding: 1.2em 2.8em; text-decoration: none; text-align: center; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 700; } .btn:hover, .btn:focus { color: #fff; outline: 0; } .first { -webkit-transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out; transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out; } .first:hover { box-shadow: 0 0 40px 40px #e74c3c inset; } .second { border-radius: 3em; border-color: #1abc9c; color: #fff; background-image: -webkit-linear-gradient(left, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%); background-image: linear-gradient(to right, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%); background-position: 0 0; background-size: 100%; -webkit-transition: background 300ms ease-in-out; transition: background 300ms ease-in-out; } .second:hover { background-position: 100px; } .third { border-color: #3498db; color: #fff; box-shadow: 0 0 40px 40px #3498db inset, 0 0 0 0 #3498db; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } .third:hover { box-shadow: 0 0 10px 0 #3498db inset, 0 0 10px 4px #3498db; } .fourth { border-color: #f1c40f; color: #fff; background-image: -webkit-linear-gradient(45deg, #f1c40f 50%, transparent 50%); background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%); background-position: 100%; background-size: 400%; -webkit-transition: background 300ms ease-in-out; transition: background 300ms ease-in-out; } .fourth:hover { background-position: 0; } .fifth { border-color: #8e44ad; border-radius: 0; color: #8e44ad; position: relative; overflow: hidden; z-index: 1; -webkit-transition: color 150ms ease-in-out; transition: color 150ms ease-in-out; } .fifth:after { content: ''; position: absolute; display: block; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 100%; background: #8e44ad; z-index: -1; -webkit-transition: width 150ms ease-in-out; transition: width 150ms ease-in-out; } .fifth:hover { color: #fff; } .fifth:hover:after { width: 110%; } .sixth { border-radius: 3em; border-color: #2ecc71; color: #2ecc71; background-image: -webkit-linear-gradient(top, transparent 50%, #2ecc71 50%); background-image: linear-gradient(to bottom, transparent 50%, #2ecc71 50%); background-position: 0% 0%; background-size: 210%; -webkit-transition: background 150ms ease-in-out, color 150ms ease-in-out; transition: background 150ms ease-in-out, color 150ms ease-in-out; } .sixth:hover { color: #fff; background-position: 0 100%; }

Setelah itu silakan save, kembali templatenya. Untuk menggunakan tombol buttonnya, kamu dapat menggunakan dalam beberapa versi. Terdapat 6 versi tombol button yang dapat kamu gunakan yang memiliki tampilan keren.

Berikut ini code untuk tombol buttonnya.

<button class="btn first"><a href="https://alekpedia.com/">Button1 </a></button> <button class="btn second"><a href="https://alekpedia.com/"> Button2 </a></button> <button class="btn third"><a href="https://alekpedia.com/"> Button3 </a></button> <button class="btn fourth"><a href="https://alekpedia.com/"> Button4 </a></button> <button class="btn fifth"><a href="https://alekpedia.com/"> Button5 </a></button> <button class="btn sixth"><a href="https://alekpedia.com/"> Button6 </a></button>

Untuk melihat hasilnya, kamu dapat melihat hasilnya nya berikut ini.

DEMO