مدونة هلا تك

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

بالطبع تتواجد الكثير من الاشكال لازرار المعاينة والتحميل ولكن عدنا لكم بازرار بشكل فلات والوان متناسقة ايضا يمكنك تغييرها وهو كود " 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'>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton orange'>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton purple'>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton blue'>مثال</a>
<a href='ضع هنا رابط التوجيه' class='bton red'>مثال</a>
</div>

و شكرا

وفي الختام !

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