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

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

• إقرأ المزيد : شخصيات فيكتور إحترافية لتصميم الصور المصغرة (v2)

أولا : أضف أكواد ال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>

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