CSS slide demo and download button with font Awesome

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

+

F

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

+

F

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...

CSS slide demo and download button with font Awesome 2014-12-03T15:30:00-08:00 Rating: 4.5 Diposkan Oleh: Unknown