زر التحميل والمشاهدة إفلات ثري دي وبصيغة CSS3 لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته

في درسنا اليوم سوف نتعرف على طريقة إضافة أزرار التحميل والمشاهدة بألوان إفلات  ثري دي وبصيغة CSS3 .

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

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

2-من لوحة التحكم اختر -> قالب -> تحرير قالب HTML

3- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

4- اضف الكود التالي فوقه .

 .HBflat3d {
border-radius:4px;
display:inline-block;
margin:5px;
padding:10px 15px;
font-size:20px;
background:#4689F7;
color:#fff;
text-shadow:0 -2px 0 rgba(0,0,0,0.20);
box-shadow:inset 0 -4px 0 rgba(0,0,0,0.20);
}
.HBflat3d:hover {
background:#36ec0a;
color:#fff;
box-shadow:inset 0 -3px 0 rgba(0,0,0,0.20);
}
.HBflat3d:active {
box-shadow:inset 0 -1px 0 rgba(0,0,0,0.20);

background:#51d14b;
}
.HBflat3d.green:hover {
background:#4ccc46;
}

.HBflat3d.small {
    padding:8px 10px;
    font-size:80%;
}
.HBflat3d.large {
padding:20px 30px;
font-size:130%;

}
 

5- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

6- اضف الكود التالي تحته .

 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 

7- استخدم الكود التالي في وضعية HTML :

 <a class="HBflat3d green" href="ضع هنا رابط التوجيه"><i class='fa fa-download'></i> للتحميل</a>
<a class="HBflat3d red" href="ضع هنا رابط التوجيه"><i class='fa fa-eye'></i>  للمشاهدة</a> 

انقر هنا للمعاينة