Cara Membuat Tombol Download dan Demo

Pada kesempatan ini admin seperti biasanya, akan memberikan tutorial Cara Membuat Tombol Download dan Demo. Kali ini tombol yang akan saya bagikan, terlihat meluncur saat di dekati oleh pointer mouse , pastinya keren kan?.Tombol ini sepenuhnya menggunakan CSS , jadi kalian tak perlu khawatir tutorial ini membuat kecepatan loading blog anda berkurang.Untuk tutorial selangkapnya, langsung saja simak langkah-langkahnya dibawah ini:

• Masuk ke blogger kalian, lalu edit template HTML , kemudian letakan kode berikut diantara </style> atau ]]></b:skin>

#wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.zkrip-slide,.zkrip-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:1px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.zkrip-slide2 { border:2px solid #36D7B7; }
.zkrip-slide:hover { background-color:#F9690E; }
.zkrip-slide2:hover { background-color:#36D7B7; }
.zkrip-slide:hover span.circle,.zkrip-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.zkrip-slide2:hover span.circle2 { color:#36D7B7; }
.zkrip-slide:hover span.title,.zkrip-slide2:hover span.title2 { left:40px; opacity:0; }
.zkrip-slide:hover span.title-hover,.zkrip-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.zkrip-slide span.circle,.zkrip-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:1px; }
.zkrip-slide2 span.circle2 { background-color:#36D7B7; }
.zkrip-slide span.title,.zkrip-slide span.title-hover,.zkrip-slide2 span.title2,.zkrip-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.zkrip-slide2 span.title2,.zkrip-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.zkrip-slide span.title-hover,.zkrip-slide2 span.title-hover2 { left:80px; opacity:0; }
.zkrip-slide span.title-hover,.zkrip-slide2 span.title-hover2 { color:#fff; }

• Kemudian lanjutkan mencari kode </head> Lalu masukan script di bawah ini tepat di atas kode </head>

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

• Untuk menggunakanya pilih mode HTML pada postingan. Lalu letakan kode berikut di tempat yang di inginkan .

<div id="wrap">
<a class="zkrip-slide" href="/" target="_blank">
  <span class="circle"><i class="fa fa-telegram"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a class="zkrip-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>

• Save

Demikian postingan tentang Cara Membuat Tombol Download dan Demo.Semoga  berhasil menerapkan dalam blog kalian.Terimakasih

Tweet

Postingan terkait:

Ditulis Tarsisius — Februari 04, 2017 — 2 Comments — Tutorial