CSS slide demo and download button with font Awesome ~ blog sepot

Selamat sore sobat Bie,.,??
Hari ini saya akan membagikan trick yang cukup keren dan menarik, sebelum nya saya pernah membuat artikel mengenai "CSS slide Demo and Download button" nah untuk yang ini beda lagi tombol nya sob,. kalau fungsi nya sih tetep sama cuma beda di tombol nya ajah kalau yang kemarin kan tombol cuma sekedar CSS Slide untuk yang ini ada tambahan font Awesome nya.

LIVE Demo nya seperti ini:

Demo Click here Download Click here

Gimana keren kan sob?? ^_^
Nah jika sobat tertarik atau berminat untuk memasang CSS slide demo & download button with font Awesome tersebut tunggu apa lagi langsung ajah sobat ikuti tutorial dibawah ini :

Berikut langkah² nya:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan

Ctrl

cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

#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;
    transition: .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 {
    left: 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;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .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;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #F9690E;
    transition: .5s;
}

.bie-slide2 span.title2,
  .bie-slide2 span.title-hover2 {
    color: #36D7B7;
    left: 80px;
}

.bie-slide span.title-hover, .bie-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.bie-slide span.title-hover, .bie-slide2 span.title-hover2 {
    color: #fff;
}

5. Tekan

Ctrl

cari kode </head> Lalu masukan script di bawah ini tepat di atas kode </head>

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

6. Kemudian simpan template sobat

EittzZ belum selesai sobb,.. :D
7. Untuk kode pemanggil nya sobat COPAS kode di bawah ini kemudian taruh di postingan sobat (Gunakan mode HTML)

<div id="wrap">
<a href="http://vanzdy.blogspot.com" class="bie-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="http://v4nzdy.blogspot.com" class="bie-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Okey,.. Cukup sekian tutorial dari saya pada sore ini semoga bermanfaat dan mohon maaf Apabila ada salah kata...

Terima kasih telah membaca artikel tentang CSS slide demo and download button with font Awesome di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.