Posted by Aak
Aak-share.com Updated at: 12:04:00 PM

Cara Membuat Tombol Download Animasi Panah

2 comments:
Cara Membuat Tombol Download Animasi Panah ~ Tombol Download yang satu ini sangat menarik, dilengkapi dengan animasi panah yang bergerak. mungkin Anda sudah pernah berkunjung di pada suatu Blog terdapat tombol Download gambar dengan format GIF yang di lengkapi tanda panah yang bergerak.



Pada Tombol panah ini juga dilengkapi dengan tanda panah yang berbegak kearah tombol download, untuk menciptakannya menggunakan properti CSS dan pada dasarnya menggunakan webkit-keyframes . bagai mana Anda tertarik, berikut ini cara Mudahnya :

1. Login Keakun Bloger
2. Pilih Template > Klik Edit HTML
3. Dengan menggunakan CTRL+F Kemudian Anda cari kode  ]]></b:skin>
4. Lalu salin kode dibawah ini dan pasangkan diatasnya atau sebelumnya :

#feature-frame {
  width: 300px;
  height: 300px;
  /* border: #333 1px solid; */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.feature {
  background: #dcdcdc;
  cursor: pointer;
  border: solid red 3px;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  opacity: 0.8;
  filter: alpha(opacity=80); /* untuk IE8 dan sebelumnya*/
  float: left;
  margin-top: 125px;
  margin-left: 125px;
}
.arrow{
  position: absolute;
  width:0;
  height:0;
  border: 21px solid transparent;
  border-bottom-color: red;
}
.arrow:after{
  position: absolute;
  content: '';
  top: 20px;
  left: -8px;
  width: 16px;
  height: 16px;
  background: red;
}
.pos0 {
  position: absolute;
  margin-left: 132px;
  margin-top: 165px;
}
.pos45 {
  position: absolute;
  margin-left: 107px;
  margin-top: 155px;
}
.pos90 {
  position: absolute;
  margin-left: 90px;
  margin-top: 132px;
}
.pos135 {
  position: absolute;
  margin-left: 107px;
  margin-top: 110px;
}
.pos180 {
  position: absolute;
  margin-left: 132px;
  margin-top: 92px;
}
.pos225 {
  position: absolute;
  margin-left: 164px;
  margin-top: 103px;
}
.pos270 {
  position: absolute;
  margin-left: 167px;
  margin-top: 130px;
}
.pos315 {
  position: absolute;
  margin-left: 167px;
  margin-top: 160px;
}
.allow-0 {
  -webkit-animation:arrow-0 0.9s infinite alternate linear;
 animation:arrow-0 0.9s infinite alternate linear;
}
@-webkit-keyframes arrow-0{
 0%   {top:0;}
 25%  {top:4px;}
 50%  {top:8px;}
 75%  {top:4px;}
 100% {top:0;}
}
@keyframes arrow-0{
 0%   {top:0;}
 25%  {top:4px;}
 50%  {top:8px;}
 75%  {top:4px;}
 100% {top:0;}
}
.allow-45 {
  -webkit-animation:arrow-45 0.9s infinite alternate linear;
 animation:arrow-45 0.9s infinite alternate linear;
}
@-webkit-keyframes arrow-45{
 0% {left:0;top:0; -webkit-transform: rotate(45deg);}
 25% {left:-4px;top:4px; -webkit-transform: rotate(45deg);}
 50% {left:-8px;top:8px; -webkit-transform: rotate(45deg);}
 75% {left:-4px;top:4px; -webkit-transform: rotate(45deg);}
 100% {left:0px;top:0; -webkit-transform: rotate(45deg);}
}
@keyframes arrow-45{
 0% {left:0;top:0; transform: rotate(45deg);}
 25% {left:-4px;top:4px; transform: rotate(45deg);}
 50% {left:-8px;top:8px; transform: rotate(45deg);}
 75% {left:-4px;top:4px; transform: rotate(45deg);}
 100% {left:0px;top:0; transform: rotate(45deg);}
}
.allow-90 {
  -webkit-animation:arrow-90 0.9s infinite alternate linear;
 animation:arrow-90 0.9s infinite alternate linear;
}
@-webkit-keyframes arrow-90{
 0%   {left:0; -webkit-transform: rotate(90deg);}
 25%  {left:4px; -webkit-transform: rotate(90deg);}
 50%  {left:8px; -webkit-transform: rotate(90deg);}
 75%  {left:4px; -webkit-transform: rotate(90deg);}
 100% {left:0px; -webkit-transform: rotate(90deg);}
}
@keyframes arrow-90{
 0%   {left:0; transform: rotate(90deg);}
 25%  {left:4px; transform: rotate(90deg);}
 50%  {left:8px; transform: rotate(90deg);}
 75%  {left:4px; transform: rotate(90deg);}
 100% {left:0px; transform: rotate(90deg);}
}
.allow-135 {
  -webkit-animation:arrow-135 0.9s infinite alternate linear;
 animation:arrow-135 0.9s infinite alternate linear;
}
@-webkit-keyframes arrow-135{
 0% {left:0;top:0; -webkit-transform: rotate(135deg);}
 25% {left:-4px;top:-4px; -webkit-transform: rotate(135deg);}
 50% {left:-8px;top:-8px; -webkit-transform: rotate(135deg);}
 75% {left:-4px;top:-4px; -webkit-transform: rotate(135deg);}
 100% {left:0px;top:0; -webkit-transform: rotate(135deg);}
}
@keyframes arrow-135{
 0% {left:0;top:0; transform: rotate(135deg);}
 25% {left:-4px;top:-4px; transform: rotate(135deg);}
 50% {left:-8px;top:-8px; transform: rotate(135deg);}
 75% {left:-4px;top:-4px; transform: rotate(135deg);}
 100% {left:0px;top:0; transform: rotate(135deg);}
}
.allow-180 {
  -webkit-animation:arrow-180 0.9s infinite alternate linear;
 animation:arrow-180 0.9s infinite alternate linear;
}
@-webkit-keyframes arrow-180{
 0%   {top:0; -webkit-transform: rotate(180deg);}
 25%  {top:4px; -webkit-transform: rotate(180deg);}
 50%  {top:8px; -webkit-transform: rotate(180deg);}
 75%  {top:4px; -webkit-transform: rotate(180deg);}
 100% {top:0; -webkit-transform: rotate(180deg);}
}
@keyframes arrow-180{
 0%   {top:0; transform: rotate(180deg);}
 25%  {top:4px; transform: rotate(180deg);}
 50%  {top:8px; transform: rotate(180deg);}
 75%  {top:4px; transform: rotate(180deg);}
 100% {top:0; transform: rotate(180deg);}
}
.allow-225 {
  -webkit-animation:arrow-225 0.9s infinite alternate linear;
 animation:arrow-225 0.9s infinite alternate linear;
}
@-webkit-keyframes arrow-225{
 0% {left:0;top:0; -webkit-transform: rotate(225deg);}
 25% {left:-4px;top:4px; -webkit-transform: rotate(225deg);}
 50% {left:-8px;top:8px; -webkit-transform: rotate(225deg);}
 75% {left:-4px;top:4px; -webkit-transform: rotate(225deg);}
 100% {left:0px;top:0; -webkit-transform: rotate(225deg);}
}
@keyframes arrow-225{
 0% {left:0;top:0; transform: rotate(225deg);}
 25% {left:-4px;top:4px; transform: rotate(225deg);}
 50% {left:-8px;top:8px; transform: rotate(225deg);}
 75% {left:-4px;top:4px; transform: rotate(225deg);}
 100% {left:0px;top:0; transform: rotate(225deg);}
}
.allow-270 {
  -webkit-animation:arrow-270 0.9s infinite alternate linear;
 animation:arrow-270 0.9s infinite alternate linear;
}
@-webkit-keyframes arrow-270{
 0%   {left:0; -webkit-transform: rotate(270deg);}
 25%  {left:4px; -webkit-transform: rotate(270deg);}
 50%  {left:8px; -webkit-transform: rotate(270deg);}
 75%  {left:4px; -webkit-transform: rotate(270deg);}
 100% {left:0px; -webkit-transform: rotate(270deg);}
}
@keyframes arrow-270{
 0%   {left:0; transform: rotate(270deg);}
 25%  {left:4px; transform: rotate(270deg);}
 50%  {left:8px; transform: rotate(270deg);}
 75%  {left:4px; transform: rotate(270deg);}
 100% {left:0px; transform: rotate(270deg);}
}
.allow-315 {
  -webkit-animation:arrow-315 0.9s infinite alternate linear;
 animation:arrow-315 0.9s infinite alternate linear;
}
@-webkit-keyframes arrow-315{
 0% {left:0;top:0; -webkit-transform: rotate(315deg);}
 25% {left:-4px;top:-4px; -webkit-transform: rotate(315deg);}
 50% {left:-8px;top:-8px; -webkit-transform: rotate(315deg);}
 75% {left:-4px;top:-4px; -webkit-transform: rotate(315deg);}
 100% {left:0px;top:0; -webkit-transform: rotate(315deg);}
}
@keyframes arrow-315{
 0% {left:0;top:0; transform: rotate(315deg);}
 25% {left:-4px;top:-4px; transform: rotate(315deg);}
 50% {left:-8px;top:-8px; transform: rotate(315deg);}
 75% {left:-4px;top:-4px; transform: rotate(315deg);}
 100% {left:0px;top:0; transform: rotate(315deg);}
}

5. Lalu simpan Template
6. Selanjutnya Anda menuju entri baru, lalu salin kode dibawah ini dan terapkan pada Mode HTML

<div id="feature-frame">
<div class="feature">
<a href="URL Tujuan" target="_blank"><img border="0" src="URL Gambar" />
</a></div>
<div class="pos0">
<div class="arrow allow-0">
</div>
</div>
<div class="pos45">
<div class="arrow allow-45">
</div>
</div>
<div class="pos90">
<div class="arrow allow-90">
</div>
</div>
<div class="pos135">
<div class="arrow allow-135">
</div>
</div>
<div class="pos180">
<div class="arrow allow-180">
</div>
</div>
<div class="pos225">
<div class="arrow allow-225">
</div>
</div>
<div class="pos270">
<div class="arrow allow-270">
</div>
</div>
<div class="pos315">
<div class="arrow allow-315">
</div>
</div>
</div>

Catatan : Isikan URL Tujuan dengan Link tujuan Anda, kemudian URL Gambar dengan link gambar

7. Publikasikan

Berikut ini beberapa gambar saya sediakan tombol gambar berbentuk bulat, silahkan Anda copy linknya dengan cara klik kanan lalu klik pada copy image URL


















Semoga bermanfat!


Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

2 comments

terima kasih artikelnya,, jujur... masih bingung kalau belum di coba....
sukses selalu.............

Balas

Iya, sama-sama gan.
Silahkan di coba gan.

Balas