Cara Menciptakan Tombol Download Animasi Panah

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.

Demo   CODE

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

1. Login Keakun Bloger
2. Pilih Template > Klik Edit HTML
3. Dengan memakai CTRL+F Kemudian Anda cari kode  ]]></b:skin>
4. Lalu salin arahan 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, kemudian salin arahan 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 kemudian klik pada copy image URL

Semoga bermanfat!



Sumber http://www.websiteedukasi.com/