يتم التشغيل بواسطة Blogger.

من أنا

صورتي

جهاد الخزاعي، مصمم ومبرمج مواقع إلكترونية 💻 ، هدفي هو تطوير الويب العربي إلى الأفضل😎، شكرا لقراءتك
زر المعاينة و التحميل بشكل جديد و إحترافي

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



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

أولا : أضف أكواد الcss التالية في أي مكان فوق </head> :



<style type="text/css">
/*=================
= تحميل و معاينة
===================*/
.boxy{
font-size: 20PX;
color: #000000;
width: 30px;
background: #ffffff;
padding: 5px;
border-radius: 10px;
text-decoration: none;
border-bottom: 2px solid #000000;
border-top: 2px solid #000000;
    }
 
.boxy:hover{
border-bottom: 2px solid #ffffff;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
transition: .3s ease-in-out;
box-shadow: 10%;
background: #00a5e4;
color: #ffffff;
box-shadow: 3px 6px 15px #ddd;
    }
</style>


ثانيا أضف هذا الكود داخل المشاركة ليظهر زر المعاينة :



 <a class="boxy" href="#"><i class="la la-eye"></i>
  معاينة
</a>



و إذا أردت إضافة زر التحميل أضف الكود التالي :



<a class="boxy" href="#"><i class="la la-cloud-download"></i>
  تحميل
</a>



هذا كل ما لدينا لليوم ، ولا تمر مرور الكرام ^_^ 
jehad khuzaie

جهاد الخزاعي، مصمم ومبرمج مواقع إلكترونية 💻 ، هدفي هو تطوير الويب العربي إلى الأفضل😎، شكرا لقراءتك

مواضيع ذات صلة

هناك 3 تعليقات:

  1. قالب نجمة لا يدعم النسخ ياأخي و حتى الأكواد لا تنسخ حاوول تمسح سكربت منع النسخ و سكراا

    ردحذف

جميع الحقوق محفوظة © 2017 لـ الخبير التقني | موقع تقني أردني

close

أكتب كلمة البحث...