LIHAT DEMONYA
1. Login ke Blogger.
2. Pilih tab Design > Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode di bawah ini dan pastekan tepat diatas kode ]]></b:skin>
.buttons { overflow:hidden; } .but1{ border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1); -moz-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1); -webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1); background-color:#f4f5fe; display:block; float:left; margin:10px; overflow:hidden; padding:10px 15px; position:relative; text-decoration:none; transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; } .but1 .icon{ background:transparent url(http://2.bp.blogspot.com/-B-BcEVyySgQ/T5jAn279Q0I/AAAAAAAAAJU/8I6uogpvrA0/s1600/download.png) no-repeat top left; float:left; height:32px; width:45px; transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; } .but1 .title{ font-size:18px; color:#000; display:block; float:left; font-weight:bold; line-height:32px; } .but1 .icon2{ background:transparent url(http://4.bp.blogspot.com/-9aBtUJbLZw0/T5jAo0qWC3I/AAAAAAAAAJY/uSVdlUp3x-Q/s1600/download2.png) no-repeat top left; height:32px; left:20px; opacity:0; position:absolute; top:-15px; width:32px; } .but1:hover{ background-color:#e3e3ff; box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5); -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5); -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; } .but1:hover .icon{ transform:rotate(-90deg) scale(0.8); -ms-transform:rotate(-90deg) scale(0.8); -moz-transform:rotate(-90deg) scale(0.8); -o-transform:rotate(-90deg) scale(0.8); -webkit-transform:rotate(-90deg) scale(0.8); } .but1:active .icon{ opacity:0; } .but1:active .icon2{ opacity:1; -webkit-animation:slideDown1 1.0s linear infinite; -moz-animation:slideDown1 1.0s linear infinite; animation:slideDown1 1.0s linear infinite; } .but1:active{ background-color:#c1c1ff; box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8); -moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8); -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8); } @keyframes slideDown1{ 0% { top: -30px; } 100% { top: 55px; } } @-webkit-keyframes slideDown1{ 0% { top: -30px; } 100% { top: 55px; } } @-moz-keyframes slideDown1{ 0% { top: -30px; } 100% { top: 55px; } }
5. Setelah selesai simpan template kamu.
6. Untuk mengaplikasikannya kamu copy kode di bawah ini
<div class="buttons"> <a href="#" class="but1"> <span class="icon"></span> <span class="title">Download Now</span> <span class="icon2"></span> </a></div>
Selesai sudah tutorial Cara membuat Tombol Download Animasi Dengan CSS3,
semoga artikel ini bermanfaat
0 komentar:
Post a Comment
Para pengurus Blog Gawsoti Tidak selalu Online untuk memantau Komentar yang Masuk, Jadi tolong berikan Komentar Anda dengan Pantas dan Layak dikonsumsi oleh Publik. No SARA, SPAM dan Sejenisnya.