Cara membuat button keren pada blog

Button sangat diperlukan pada sebuah blog, apalagi blog tersebut mengandung unsur link unduh. Ketika memasang link unduh hanya ditempelkan pada sebuah postingan saya rasa itu membuat tampilan blog menjadi tidak cantik dan terkesan tidak profesional.

Pada kesempatan ini saya akan membagikan sebuah tutorial singkat untuk menampilkan button-button.

Cara membuat button keren pada blog

Simak dengan seksama tutorial dibawah ini:
1. Masuk dashboard blog
2. Klik menu tema/template
3. Klik html
4. Cari kode ]]></b:skin> , untuk mempermudah pencarian gunakan ctrl+f
5. Pastekan kode css dibawah ini tepat diatas ]]></b:skin>
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%; }
6. Simpan tema/template
7. Buatlah postingan yang akan kamu tambahkan button
8. Paste salah satu kode button dibawah ini
<button class="btn first"><a href="http://www.faronesia.com/">Button1 </a></button> <button class="btn second"><a href="http://www.faronesia.com/"> Button2 </a></button> <button class="btn third"><a href="http://www.faronesia.com/"> Button3 </a></button> <button class="btn fourth"><a href="http://www.faronesia.com/"> Button4 </a></button> <button class="btn fifth"><a href="http://www.faronesia.com/"> Button5 </a></button> <button class="btn sixth"><a href="http://www.faronesia.com/"> Button6 </a></button>
Keterangan:
Ubah bagian link yang berwarna MERAH dengan link yang akan kamu pakai.


Bagaimana, mudah bukan?? Itulah tadi tutorial singkat cara membuat button keren pada blog, semoga bermanfaat jangan lupa share dan komen dibawah ya.

0 Response to "Cara membuat button keren pada blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Website ini dilindungi oleh Google DMCA. Dilarang keras menyalin (copy/paste) sebagian atau keseluruhan isi blog tanpa mencantumkan sumber link aktif dari website www.faronesia.com