İndir Butonu

Web sitemizde dosya indirmek ya da başka linke göndermek için metne link vermek ya da görsele link vermek haricinde alternatif arayanlara dinamik buton nasıl eklenir sorusunun cevabı işte burada...

<style>
/* mvKOZE Blogger Sayfasında Dosya İndirme Alanını Güvenle Kullanın */
/* mvkoze Özel İndirme Butonu Stilleri */
.mvkoze-dl-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 35px;
background: linear-gradient(135deg, #d8a141 0%, #b88126 100%);
color: #ffffff;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
font-size: 18px;
font-weight: 700;
text-decoration: none;
border-radius: 6px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 6px 20px rgba(216, 161, 65, 0.35);
z-index: 1;
cursor: pointer;
/* Metin seçimi ve kopyalamayı engelleme */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.mvkoze-dl-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1a1a1a;
z-index: -1;
transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
transform: scaleX(0);
transform-origin: right;
}
/* Hover (Geri sayım yokken) */
.mvkoze-dl-btn:not(.is-counting):hover::before {
transform: scaleX(1);
transform-origin: left;
}
.mvkoze-dl-btn:not(.is-counting):hover {
color: #d8a141;
box-shadow: 0 8px 25px rgba(26, 26, 26, 0.5);
}
.mvkoze-icon {
margin-right: 12px;
display: flex;
align-items: center;
}
.mvkoze-icon svg {
width: 22px;
height: 22px;
fill: currentColor;
animation: bounceIcon 2s infinite;
}
.mvkoze-dl-btn:not(.is-counting):hover .mvkoze-icon svg {
animation: none;
transform: translateY(3px);
transition: transform 0.3s ease;
}
.mvkoze-dl-btn:active:not(.is-counting) {
transform: scale(0.96);
box-shadow: 0 2px 10px rgba(26, 26, 26, 0.4);
}
/* Geri sayım başladığındaki kilitli buton stili */
.mvkoze-dl-btn.is-counting {
cursor: wait;
background: #1a1a1a;
color: #d8a141;
box-shadow: none;
}
.mvkoze-dl-btn.is-counting .mvkoze-icon svg {
animation: none;
opacity: 0.5;
}
@keyframes bounceIcon {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-6px); }
60% { transform: translateY(-3px); }
}
</style>
<a id="mvkozeDownloadBtn" class="mvkoze-dl-btn" data-link="BURAYA_INDIRME_LINKINI_YAZ" oncontextmenu="return false;" tabindex="0">
<span class="mvkoze-icon">
<svg viewBox="0 0 24 24">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
</svg>
</span>
<span class="text" id="mvkozeBtnText">BURAYA_INDIRME_METNİ_YAZ</span>
</a>
<script>
document.getElementById('mvkozeDownloadBtn').addEventListener('click', function(e) {
e.preventDefault(); // Sayfanın yukarı kaymasını veya işlem yapmasını engeller
const btn = this;
const textElement = document.getElementById('mvkozeBtnText');
const targetLink = btn.getAttribute('data-link');
const originalText = "Windows 11 İndir";
// Eğer zaten geri sayım yapıyorsa çoklu tıklamayı engelle
if (btn.classList.contains('is-counting')) return;
let timeLeft = 9; // Geri sayım süresi
btn.classList.add('is-counting');
textElement.innerHTML = `Bekleyin (${timeLeft})...`;
const countdownTimer = setInterval(function() {
timeLeft--;
if (timeLeft > 0) {
textElement.innerHTML = `Bekleyin (${timeLeft})...`;
} else {
clearInterval(countdownTimer);
textElement.innerHTML = "Yönlendiriliyor...";
// Süre bitince yeni sekmede linki aç
window.open(targetLink, '_blank');
// Kullanıcı mevcut sekmeye geri dönerse butonun eski haline gelmesi için sıfırlama
setTimeout(function() {
btn.classList.remove('is-counting');
textElement.innerHTML = originalText;
}, 2000);
}
}, 1000); // 1000 milisaniye = 1 saniye
});
</script>