Postingan ini hanya untuk kebutuhan blog ini saja biar gaklupa dengan scriftnya yang bersumber dari SOURCE namun bagi yang pingin buat ya copas saja. Sama kitaa :D



Code Postingan :
 
<div id="wrap">

<a class="bie-slide" href="#" 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 class="bie-slide2" href="#" 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>
 
# : Link URL  

Copy code berikut diatas  

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

codes :

#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; }
 


DEMO:



Untuk mengganti icon fa fa go to http://fontawesome.io/icons/

Cellos Clothes CLOTHING COMPANY © MMXVI | Sablon Kaos Manual Satuan dan Lusinan Bahan Cotton Combad with Ink Rubber Matsui.

Diberdayakan oleh Blogger.