Merhaba, ücretsiz programlar paylaştığım bir sitem var. Sitede her program konusunun içinde "Hemen indir" butonu sabit. Bu butonu biraz dikkat çekilebilir hale getirmek istiyorum. (Örneğin, butonun etrafında farklı renklerin yanıp sönmesi gibi)

Araştırmalarıma göre neon glow ve neon button diye bir konu var. Aslında karşıma çıkan örnekler benim istediğim gibi bir şey değil, sadece bir sitede benim istediğim tarzda bir buton yapılmış. Css kodlarına bakıp kendime göre uyarlamaya çalıştım fakat bir yerde hata yapıyorum ve şablonu komple bozuyorum. Konu ile ilgili ücretli veya ücretsiz yardım istiyorum.

Örnek kodlar;

.indirbuttontum{z-index:5;position:relative;float:left;margin-top:0;margin-bottom:0;width:100%;padding:25px}
@-webkit-keyframes sparkle {
from{background-position:0 100%}
to{background-position:200% 100%}
}
@keyframes sparkle {
from{background-position:0 100%}
to{background-position:200% 100%}
}
.indirbutton i{float:left;height:20px;margin-right:10px;padding-right:10px;border-right:1px solid rgba(0,0,0,.1);line-height:21px;color:#777777}
.indirbutton{background-color:#e5e5e5;background:-webkit-gradient(linear,left top,left bottom,from(#fefefe),to(#e5e5e5));background:-webkit-linear-gradient(#fefefe,#e5e5e5);background:linear-gradient(#fefefe,#e5e5e5);display:inline-block;border-radius:3px;position:relative;font-size:16px;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,0.4);color:#444;padding:15px 25px;text-shadow:0 1px #fefefe;width:100%;text-align:center}
.indirbutton a{color:#444}
.indirbutton:before{-webkit-animation:sparkle 4s infinite linear;animation:sparkle 4s infinite linear;background:linear-gradient(90deg,#536dfe 0%,#bbdefb 11%,#0091ea 22%,#8c9eff 33%,#81d4fa 44%,#e1f5fe 55%,#0277bd 66%,#9575cd 77%,#18ffff 88%,#536dfe 100%);background-size:300% 100%;content:'';position:absolute;left:0;top:0;width:100%;height:100%;border-radius:3px;-webkit-filter:blur(4px);filter:blur(4px);z-index:-1;-webkit-transform:scale(1.02) translateY(.2px);transform:scale(1.02) translateY(.2px)}

<div class="indirbuttontum">
<a href="indirme linki" title="" class="indirbutton"><i class="fa fa-download" aria-hidden="true"></i>Hemen indir</a>
</div>

Mevcut sitemin kodları;

.indirme{display:inline-block;width:300px;margin:0 10px;text-align:center;}
.indirme a.indir{width:230px;display:inline-block;text-decoration:none;background:#46B430;cursor:pointer;font-size:24px;font-family: 'Roboto Slab', serif;font-weight:bold;color:#fff;border-radius:3px;padding:15px 20px;margin-bottom:5px;border-width:0 0 3px 0;border-style:solid;border-color:#1b9a02;}
.indirme a.indir:hover{background:#1b9a02;border-color:#168001;}
.indirme a.indir span{font-size:11px;}
.indirme a.qrcode{width:230px;display:inline-block;margin-bottom:5px;text-decoration:none;background:#f2c522;cursor:pointer;font-size:24px;font-family: 'Roboto Slab', serif;font-weight:bold;color:#fff;border-radius:3px;padding:15px 20px;border-width:0 0 3px 0;border-style:solid;border-color:#dcad03;}
.indirme a.qrcode:hover{background:#dcad03;border-color:#c59b03;}
#barkod .qrkodu{display:none;position:absolute;top:40%;left:40%;background:#f8f8f8;padding:20px;border:10px solid #999;}
.indirme .sayisi{width:230px;display:inline-block;text-decoration:none;background:#336688;cursor:pointer;font-size:24px;font-family: 'Roboto Slab', serif;font-weight:bold;color:#fff;border-radius:3px;padding:15px 20px;border-width:0 0 3px 0;border-style:solid;border-color:#09466f;}
.indirme .sayisi:hover{background:#09466f;border-color:#336688;}

<div class="indirme">
<a class="indir fa-download" href="indirme linki" target="_blank"> Hemen indir</a>
</div>

Konu kapanabilir, çözdüm.