U3F1ZWV6ZTgwNzczMjc0MDNfQWN0aXZhdGlvbjkxNTA0OTc4MjA3
recent
أخبار ساخنة

إضافة أزرار تحميل و معاينة بتأثير رائع و مميز


إضافة أزرار تحميل و معاينة بتأثير رائع و مميز

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

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




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



 ادخل إلى مدونتك ثم اختر لوحة التحكم .

2- من لوحة التحكم اختر قالب ثم اضغط على تحرير قالب .

3- ابحث عن الوسم : ]]></b:skin>
4- ضع  كود CSS فوقه .


.bton-grup{width:500px;text-align:center;margin:5px auto}
.bton{display:inline-block;height:50px;line-height:50px;padding-right:20px;padding-left:70px;position:relative;background:#1abc9c;color:#fff;font-size:22px;font-family:'Yanone Kaffeesatz',sans-serif;text-transform:uppercase;letter-spacing:1px;margin:5px;border-radius:1px;text-shadow:0 1px 0 rgba(0,0,0,0.5);box-shadow:0 2px 2px rgba(0,0,0,0.2)}
.bton span{text-align: center;position:absolute;left:0;width:50px;background:rgba(0,0,0,0.5);border-top-left-radius:1px;border-bottom-left-radius:1px;border-right:1px solid rgba(0,0,0,0.15)}
.bton:hover span{background:#222;border-right:1px solid rgba(0,0,0,0.3)}
.bton.orange{background:#FF7F00}
.bton.purple{background:#8e44ad}
.bton.blue{background:#297fb8}
.bton.red{background:#e74c3c}


و عند كتابة موضوع الأنتقال الى   HTML  و ضع هذا الكود


<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
<div class='bton-grup'>
<a href='ضع هنا رابط التوجيه' class='bton'><span><i class="fa fa-download"></i></span>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton orange'><span><i class="fa fa-file-text"></i></span>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton purple'><span><i class="fa fa-folder-open"></i></span>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton blue'><span><i class="fa fa-paperclip"></i></span>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton red'><span><i class="fa fa-link"></i></span>مثال</a>
</div>




و شكرا






الاسمبريد إلكترونيرسالة