زر تحميل أخضر كبير لبولجر
إليك رمز JavaScript لإنشاء زر تحميل أخضر كبير لبولجر:
// إنشاء عنصر الزر
const button = document.createElement('button');
// تعيين نص الزر
button.textContent = 'تحميل';
// تعيين لون الزر الأخضر
button.style.backgroundColor = 'green';
// تعيين حجم الزر كبير
button.style.fontSize = '16px';
button.style.padding = '10px 20px';
// إضافة الزر إلى الصفحة
document.body.appendChild(button);
// إضافة وظيفة للزر عند النقر عليه
button.addEventListener('click', () => {
// قم بإجراء ما تريد هنا عند النقر على الزر
alert('تم النقر على الزر!');
});
ملاحظة:
* يمكنك تعديل نص الزر، وحجمه، ولونه حسب رغبتك.
* يمكنك أيضًا إضافة وظيفة مخصصة للزر عند النقر عليه.
مثال:
// إنشاء زر تحميل ملف
const button = document.createElement('button');
button.textContent = 'تحميل ملف';
button.style.backgroundColor = 'green';
button.style.fontSize = '16px';
button.style.padding = '10px 20px';
document.body.appendChild(button);
button.addEventListener('click', () => {
// فتح مربع حوار لاختيار ملف
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.click();
// قراءة الملف المحدد
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
// قم بإجراء ما تريد هنا مع الملف
console.log('تم تحميل الملف:', file.name);
}
});
});
ملاحظة:
* هذا المثال يفتح مربع حوار لاختيار ملف عند النقر على الزر.
* يمكنك تعديل هذا المثال لقراءة الملفات من عناوين URL أو من قواعد البيانات.
/* تنسيق زر التحميل العصري */ .download-btn { display: inline-block; padding: 12px 30px; background: linear-gradient(135deg, #1e90ff, #00b4d8); /* تدرج لوني أزرق عصري */ color: #fff; /* لون النص أبيض */ text-align: center; text-decoration: none; font-size: 16px; font-weight: 600; /* خط عريض قليلاً */ border-radius: 8px; /* زوايا دائرية أكثر حداثة */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* ظل خفيف */ transition: all 0.3s ease; /* تأثير سلس للحركة */ } .download-btn:hover { background: linear-gradient(135deg, #00b4d8, #1e90ff); /* تبديل التدرج عند التمرير */ color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* ظل أقوى عند التمرير */ transform: translateY(-2px); /* تحريك الزر لأعلى قليلاً */ }
تعليقات
إرسال تعليق