MEMBUAT TOMBOL DOWNLOAD DAN DEMO DENGAN EFEK JELLY
account_circle POSTED BY ALUNG GOPAL label LABEL : BLOGGER , WIDGET BLOG
date_range ON : 7/04/2015
Cover
Cara membuat dan tombol download dan demo ini sangat mudah, tampilannya nya juga cukup sederhana. Yang membuatnya keren adalah efek :hover menggunakan CSS Keyframes. Dengan gaya Jelly. Untuk demo silahkan lihat diawah ini.
Demo Download
Keren gak?, Kalo berminat silahkan Copy dan paste kode-kode dibawah ini :D. Karena logo yang digunakan menggunakan FontAwesome, Pastikan sudah terdapat FontAwesome di template blog anda. Jika belum klik ini untuk memasang :D.
CSS
Letakan kod CSS ini diatas kode ]]></b:skin> atau </style>.
a#demo{background:#3DB39C;color:#fff;font-family:'Open Sans','Tahoma';font-size:17px;display:inline-block;padding:10px 20px;transition:all 400ms;text-align:center;border-radius:2.5px;padding-left:40px}
a#demo:hover{background:#16a085}
#demo a{color:#fff}
#donlot a{color:#fff}
#demo{float:none}
a#demo:hover,a#donlot:hover{-webkit-animation:jelly .5s;-moz-animation:jelly .5s;-ms-animation:jelly .5s;-o-animation:jelly .5s;animation:jelly .5s;}
@-webkit-keyframes jelly{
from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}
@keyframes jelly{
from,to{-webkit-transform:scale(1, 1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}}
a#donlot{background:#35729A;color:#fff;font-family:'Open Sans','Tahoma';font-size:17px;display:inline-block;padding:10px 20px ;transition:all 400ms;text-align:center;border-radius:2.5px;padding-left:40px}
a#demo:before{margin-left:-25px;font-size:20px;background:none;content:"\f1d8";position:relative ;font-family: fontAwesome;font-style: normal;font-weight: normal;padding:1px 5px;text-decoration: inherit;color:#fff}
a#donlot:before{margin-left:-25px;font-size:20px;background:none;content:"\f019";position:relative ;font-family: fontAwesome;font-style: normal;font-weight: normal;padding:1px 5px;text-decoration: inherit;color:#fff}
a#donlot:hover{background:#155986}
HTML
Untuk memanggil tombol download dan demo kamu harus berada pada mode HTML saat menulis post. Seperti gambar dibawah ini.
Contoh Pemakaian
Lalu pastekan kode ini untuk memanggil Tombol Download.
<div style='text-align:center'>
<a href="#" id="donlot" rel="nofollow" target="_blank" title="Deskripsi anda">Download</a>
</div>
Ini untuk memanggill Tombol Demo.
<div style="text-align: center;">
<a href="#" id="demo" rel="nofollow" target="_blank" title="Deskripsi anda">Demo</a>
</div>
Pasang kode FontAwesome 4.3.0 ini, letakan dibawah kode <head>.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
Efek dari template Simple Grid redesign Indzign
Blog ini tidak menggunakan FONTAWESOME lagi jadi Icon tidak terlihat seperti pada gambar,
http://teknosasak.blogspot.co.id/2015/07/tombol-download-dan-demo.html
0 Response to "Cara Membuat Tombol Dengan Efek Jelly di Blog"
Post a Comment