اقدم لكم إضافة رائعة جدا و مميزة

ازرار تحميل و معاينة بشكل احترافي مع اظهار ازرار فرعية

بالطبع تتواجد الكثير من الاشكال لازرار المعاينة والتحميل ولكن عدنا لكم بازرار بشكل فلات والوان متناسقة ايضا يمكنك تغييرها وهو كود " CSS " بسيط مع تأثير " hover " لا يلزم الكثير من الخبرات ايضا 

الازرار ذو شكل خيالي و احترافي لابد و انك ستحتاج ازرار تحميل و معاينة 

هذه الازرارتظهر بهذا الشكل الجميل و الفريد و المميز بها و عند المرور على الزر تظهر مجموعة من الازرار الفرعية
ختى 4 ازرار فرعية يمكنك مشاهدة الصورة المرفقة ليتم التوضيح

ان هذه الازرار عند المرور عليها تظهرالازرار الفرعية عليها بشكل جميل و مميز

و طريقة تركبها سهلة و لا تحتاج لجهد و فقط بعدة خطوات 

لمعرفة الطريقة تابع الشرح التالي

طريقة التركيب

إذهب الى القالب تحرير HTML

إبحث عن الوسم التالي ألصق الكود التالي فوقه مباشرة  ]]>/b:skin>

/* CSS Slide Demo and Download Button */.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;width:auto;height:50px;line-height:50px;border-radius:3px;}.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;padding:0;width:100%;background-color:#20a3cb;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px;}.download:hover h1{margin-left:100%;opacity:0.7;}.download ul {display:inline-block;margin:0;padding:0;}.download ul li {position:static;display:inline-block;padding:0 .1em;}.download ul li::before {display:none;}.download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;background:none;transition:all 0.5s ease;}.download ul li a:hover {background:#20a3cb;color:#fff;border-radius:2px;}.download-info{background:#1c94b9;box-shadow:0 0 3px rgba(0,0,0,0.3);}.download-info h1{background-color:#20a3cb;}.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;width:auto;height:50px;line-height:50px;border-radius:3px;}.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;padding:0;width:100%;background-color:#a3acb2;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px;}.demo:hover h1{margin-left:100%;opacity:0.7;}.demo ul {display:inline-block;margin:0;padding:0;}.demo ul li {position:static;display:inline-block;padding:0 .1em;}.demo ul li::before {display:none;}.demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;background:none;transition:all 0.5s ease;}.demo ul li a:hover {background:#a3acb2;color:#fff;border-radius:2px;}.demo-info{background:#8f979c;box-shadow:0 0 3px rgba(0,0,0,0.3);}.demo-info h1{background-color:#a3acb2;}

عند كتابة موضوع أنسخ الاكواد التالية وأضفها في في محرر HTML عند كتابة موضوع جديد.

مع تغير # بروابط التحميل و المعاينة

<div class="download download-info">
<h1> تحميل </h1>
<ul>
<li><a href="#" target="_blank"> تحميل 1</a></li>
<li><a href="#" target="_blank"> تحميل 2</a></li>
<li><a href="#" target="_blank"> تحميل 3</a></li>
<li><a href="#" target="_blank"> تحميل 4</a></li>
</ul>
</div>
<div class="demo demo-info">
<h1> معاينة </h1>
<ul>
<li><a href="#" target="_blank"> معاينة 1 </a></li>
<li><a href="#" target="_blank"> معاينة 2 </a></li>
<li><a href="#" target="_blank"> معاينة 3 </a></li>
<li><a href="#" target="_blank"> معاينة 4 </a></li>
</ul>
</div>

و شكرا

وفي الختام !

شكرًا لوقتكم واهتمامكم بقراءة موضوع أزرار تحميل و معاينة بأقسام فرعية إضافة رائعة جدا و مميزة . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.