**مميزات أزرار التحميل والمعاينة والزر العام**  

تصميمات متنوعة لأزرار التحميل والمعاينة لموقع بلوجر

✅ مميزات الكود:

تصميم متجاوب وأنيق.

تأثير عند التمرير والضغط.

مناسب لجميع المتصفحات.

يدعم خاصية download للتحميل المباشر.

📌 فقط استبدل رابط_المعاينة و رابط_التحميل بالروابط الحقيقية الخاصة بك.

معاينة الشكل الأول

معاينة القالب العربى
معاينة القالب الاجنبى
تحميل القالب العربى
تحميل القالب الاجنبى

للتحميل

.button-blue {
display: inline-block;
padding: 10px 20px;
margin: 10px 5px;
font-size: 16px;
font-weight: bold;
color: white;
background-color: #007BFF; /* الأزرق */
border: none;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: background-color 0.3s, transform 0.2s;
}

.button-blue:hover {
background-color: #0056b3; /* أزرق داكن عند التمرير */
}

.button-blue:active {
transform: scale(0.96); /* تأثير الضغط */
}

تحميل الشكل الأول

معاينة الشكل الثانى

.button-blue {
display: inline-block;
padding: 10px 20px;
margin: 10px 5px;
font-size: 16px;
font-weight: bold;
color: white;
background-color: #007BFF; /* الأزرق */
border: none;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: background-color 0.3s, transform 0.2s;
}

.button-blue:hover {
background-color: #0056b3; /* أزرق داكن عند التمرير */
}

.button-blue:active {
transform: scale(0.96); /* تأثير الضغط */
}

معاينة
تحميل

للتحميل

كود

hljs.highlightAll();

function selectCode(btn) {
const code = btn.closest(‘.code-box’).querySelector(‘code’);
const range = document.createRange();
range.selectNodeContents(code);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}

function copyCode(btn) {
const code = btn.closest(‘.code-box’).querySelector(‘code’).innerText;
navigator.clipboard.writeText(code).then(() => alert(“تم النسخ!”));
}

function downloadCode(btn) {
const code = btn.closest(‘.code-box’).querySelector(‘code’).innerText;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.txt”;
link.click();
}

function expandCode(btn) {
const codeContent = btn.closest(‘.code-box’).innerHTML;
const popup = window.open(“”, “_blank”, “width=800,height=600”);
popup.document.write(`

كود موسع

body { background: var(–code-bg); color: var(–code-color); font-family: monospace; padding: 20px; }

${codeContent}

hljs.highlightAll();

`);
}

(function autoTheme() {
const prefersDark = window.matchMedia(“(prefers-color-scheme: dark)”).matches;
document.querySelectorAll(‘.code-box-wrapper’).forEach(box => {
box.setAttribute(“data-theme”, prefersDark ? “dark” : “light”);
});
updateThemeStyles(prefersDark ? “dark” : “light”);
})();

function toggleTheme() {
const wrapper = document.querySelector(“.code-box-wrapper”);
const current = wrapper.getAttribute(“data-theme”);
const newTheme = current === “dark” ? “light” : “dark”;
wrapper.setAttribute(“data-theme”, newTheme);
updateThemeStyles(newTheme);
}

function updateThemeStyles(theme) {
const themeLink = document.getElementById(“hljs-theme”);
themeLink.href = theme === “dark”
? “https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css”
: “https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css”;
}

تحميل ومعاينة الشكل الثانى.txt – 645 B

الشكل الثالث

 بخلفية بيضاء ونص أزرق، وعند الضغط تتحول إلى أحمر (نصًا وخلفية خفيفة)، مع لمسة أنيقة وتفاعل سلس:

.button-outline-blue {
display: inline-block;
padding: 10px 20px;
margin: 10px 5px;
font-size: 16px;
font-weight: bold;
color: #007BFF; /* أزرق */
background-color: #ffffff; /* أبيض */
border: 2px solid #007BFF;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
}

.button-outline-blue:hover {
background-color: #f0f8ff; /* خلفية زرقاء خفيفة */
}

.button-outline-blue:active {
color: #dc3545; /* أحمر */
background-color: #ffe5e5; /* خلفية حمراء فاتحة */
border-color: #dc3545;
}

معاينة
تحميل

للتحميل

تحميل ومعاينة الشكل الثالث.txt – 746 B

الشكل الرابع

.button-outline-blue {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
margin: 10px 8px;
font-size: 18px;
font-weight: bold;
color: #007BFF;
background-color: #ffffff;
border: 2px solid #007BFF;
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
}

.button-outline-blue i {
font-size: 20px;
}

.button-outline-blue:hover {
background-color: #f0f8ff;
}

.button-outline-blue:active {
color: #dc3545;
background-color: #ffe5e5;
border-color: #dc3545;
}

معاينة

تحميل

تحميل ومعاينة الشكل الرابع.txt – 746 B 

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}