Demo button effek slide
Butuh tombol DENGAN Yang unik, seoke.com akan postingkan mebuat demo tombol effek slide. Kalian langsung aja kecaranya oke
foto Dengan www.kellydennisvoice.com/
- Cari Kode </ style> tau cari Kode ]]> </ b: skin>
- Masukan Kode Di Bawah ini Tepat di atas Kode di ANTARA dua yang kalian pilih
#wrap {margin: 20px auto; text-align: center; }
#wrap br {display: none; }
.bie-slide, .bie-slide2 {position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid # F9690E; margin: 10px; transisi: .5s; }
.bie-slide2 {border: 2px solid # 36D7B7; }
.bie-slide: hover {background-color: # F9690E; }
.bie-slide2: hover {background-color: # 36D7B7; }
.bie-slide: hover span.circle, .bie-slide2: hover span.circle2 {kiri: 100%; margin-left: -45px; background-color: #fdfdfd; color: # F9690E; }
.bie-slide2: hover span.circle2 {color: # 36D7B7; }
.bie-slide: hover span.title, .bie-slide2: hover span.title2 {left: 40px; opacity: 0; }
.bie-slide: hover span.title-hover, .bie-slide2: hover span.title-hover2 {opacity: 1; left: 40px; }
.bie-slide span.circle, .bie-slide2 span.circle2 {display: block; background-color: # F9690E; Warna: # fff; position: absolute; float: kiri; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; kiri: 0; transisi: .5s; border-radius: 50%; }
.bie-slide2 span.circle2 {background-color: # 36D7B7; }
.bie-slide span.title, .bie-slide span.title-hover, .bie-slide2 span.title2, .bie-slide2 span.title-hover2 {position: absolute; kiri: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: # F9690E; transisi: .5s; }
.bie-slide2 span.title2, .bie-slide2 span.title-hover2 {color: # 36D7B7; kiri: 80px; }
.bie-slide span.title-hover, .bie-slide2 span.title-hover2 {kiri: 80px; opacity: 0; }
.bie-slide span.title-hover, .bie-slide2 span.title-hover2 {color: # fff; }
- Kemudian cari Kode </ head> Dan letakan Kode di Bawah ini Tepat di atasnya
<Link href = 'http: //netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel = 'stylesheet' />
- Simpan Template tersebut, untuk review memanggilnya kita cukupdengan mode HTML di postingan Dan silahkan Simpan Kode Di Bawah ini dengan yang kalian inginkan
<Div id = "membungkus">
<a class="bie-slide" href="http://seokecom.blogspot.com" target="_blank">
<Span class = "lingkaran"> <i class = "fa fa-roket"> </ i> </ span>
<Span class = "title"> Demo </ span>
<Span class = "title-melayang"> Klik di sini </ span>
</a>
<a class="bie-slide2" href="http://seokecom.blogspot.com" target="_blank">
<Span class = "CIRCLE2"> <i class = "fa fa Download"> </ i> </ span>
<Span class = "title2"> Unduh </ span>
<Span class = "title-hover2"> Klik di sini </ span>
</a>
</ Div>
Mudah Bukan tombol MEMBUAT Demo effek slide pada blog .
seoke.com mengucapkan Banyak terima kasih atas berkunjung di seoke.com JIKA Kalian Punya keritik dan Saran silahkan Tinggalkan pesanya di komentar Yang telah di siapkan..
Ditulis Oleh : Seoke.com Blogger
Terima kasih telah berkunjung di Demo button effek slide .Silahkan kalian masukan mail kalian untuk berlangganan lewat mail tentang artikel terbaru dari SEOKE.COM.
0 komentar:
Post a Comment