Archive Pages Design$type=blogging

17 Tombol Dengan Efek Border Transisi

C ara Membuat 17 Tombol Dengan Efek Border Transisi . Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menj...


Cara Membuat 17 Tombol Dengan Efek Border Transisi. Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menjadi terkesan dan ingin juga memasangnya di blog mereka, sebab tombol-tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya dan kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek Background Transisi. Lihat juga tutorial saya sebelumnya 27 Icons Tombol Dengan Berbagai Efek.
17 Tombol Dengan Efek Border Transisi  ini sama seperti tombol2 sebelumnya secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", saya ada solusinya sob...
17 Tombol Dengan Efek Border Transisi
17 Tombol Dengan Efek Border Transisi

Simak langkah-langkahnya dibawah ini:

Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

Cara Memasang 17 Tombol Dengan Efek Border Transisi

Langkah Ke-1: Masuk ke menu Template>>Edit HTMLTambahkan Kode Css berikut sebelum kode </head> , jika sudah ada abaikan saja sob...

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah Ke-2: Tambahkan  kode css  dibawah ini sebelum kode </head> silahkan diedit untuk warna dan ukurannya pada kode .btn lalu Simpan Template sobat. Pilihan Warna

<link href="//cdn.rawgit.com/antoncabon/css/master/border-transisi.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.kotak {margin:20px auto;text-align:center;}
.btn{display:inline-block;position:relative;font-family:'Open Sans',Helvetica,sans-serif;text-decoration:none;font-weight:700;background:#333;padding:9px 28px;margin:5px 5px;border-radius:3px;opacity:1;border:0;text-transform:uppercase;transition:all .3s ease-out;}
</style>

Langkah Ke-3:  Tambahkan kode html dibawah ini  pada halaman postingan sobat posisi HTML mode bukan Compose. Pilih salah satu saja sob, ga perlu dipasang semua.

<div class="kotak">
<a href="#" class="btn hvr-border-fade">Border Fade</a>
<a href="#" class="btn hvr-hollow">Hollow</a>
<a href="#" class="btn hvr-trim">Trim</a>
<a href="#" class="btn hvr-ripple-out">Ripple Out</a>
<a href="#" class="btn hvr-ripple-in">Ripple In</a>
<a href="#" class="btn hvr-outline-out">Outline Out</a>
<a href="#" class="btn hvr-outline-in">Outline In</a>
<a href="#" class="btn hvr-round-corners">Round Corners</a>
<a href="#" class="btn hvr-underline-from-left">Underline From Left</a>
<a href="#" class="btn hvr-underline-from-center">Underline From Center</a>
<a href="#" class="btn hvr-underline-from-right">Underline From Right</a>
<a href="#" class="btn hvr-reveal">Reveal</a>
<a href="#" class="btn hvr-underline-reveal">Underline Reveal</a>
<a href="#" class="btn hvr-overline-reveal">Overline Reveal</a>
<a href="#" class="btn hvr-overline-from-left">Overline From Left</a>
<a href="#" class="btn hvr-overline-from-center">Overline From Center</a>
<a href="#" class="btn hvr-overline-from-right">Overline From Right</a>
</div>
Langkah Ke-3: Silahkan diganti nama dari tombol tersebut.



Untuk pilihan warna silahkan sobat cek disini 
SELESAI ! Jika ada kendala silahkan tanyakan pada kolom komentar dan selamat mencoba.



http://kyleandkelsey.blogspot.com/2015/08/27-icons-tombol-dengan-berbagai-efek.html

COMMENTS

Nama

Animasi Blogger Button Css Javascript jQuery Sider Sosial Media Syntax Highlighter Template Tips Tutorial Windows 10
false
ltr
item
Simple Tutorial: 17 Tombol Dengan Efek Border Transisi
17 Tombol Dengan Efek Border Transisi
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4-M_DrhS8OYpQHUlupL3zt4nu2ok9dRr6kKTpKr8OkCr8qO9Fcz6C7dSe9iqZtZxqs8gPZ1DK9dBb9OCWnFrOiJVOUu88Ka6Ni84zh31262AUIE67Xg_BYs8oMpOyVDFG4QduvgFqnOZM/s640/1border-transisi.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4-M_DrhS8OYpQHUlupL3zt4nu2ok9dRr6kKTpKr8OkCr8qO9Fcz6C7dSe9iqZtZxqs8gPZ1DK9dBb9OCWnFrOiJVOUu88Ka6Ni84zh31262AUIE67Xg_BYs8oMpOyVDFG4QduvgFqnOZM/s72-c/1border-transisi.jpg
Simple Tutorial
https://mirandahardy.blogspot.com/2015/08/17-tombol-dengan-efek-border-transisi.html
https://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/2015/08/17-tombol-dengan-efek-border-transisi.html
true
4419251694985783704
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago