Membuat Tombol Demo dan Download

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/

ORDER / INFO :

Chat WhatsApp