اضافة ازرار CSS احترافية لمدونتك

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

إنشاء زر معاينة احترافي باستخدام CSS3

ابحث عن الوسم ]]></b:skin>و اضف فوقه الكود التالي

mudwnpbutton {
   color: #222;
   background: #9dea4f;
   padding: 20px 30px;
   -webkit-transition:-webkit-box-shadow .5s ease;
   -moz-transition:-webkit-box-shadow .5s ease;
   -ms-transition:-webkit-box-shadow .5s ease;
   -o-transition:-webkit-box-shadow .5s ease;
   transition:-webkit-box-shadow .5s ease;
   margin:auto;
   font: normal 16px Arial, Verdana;
}

.mudwnpbutton:hover {
   color: #222;
   background: #BBFD12;
   -webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   -moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   -ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   -o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   position:relative;
   z-index:99999;
}
.mudwnpbutton a {
   color: #222;
   text-decoration: none;
   font: normal 16px Arial, Verdana;
}

أهم الملاحظات حول الكود

1. هذه الكلمة mudwnpbutton والمتكررة ثلاث مرات هي معرف الزر ولهذا يفضل تغييرها بكلمة من عندك تميز الزر

2. وإن أردت ان تضيف أكثر من زر كل ما عليك ان تقوم بتنسيق الزر باللون الذي يعجبك ثم تغير المعرف الخاص به وتضيف الكود الخاص
3. الرقم 16 هو حجم الخط يمكنك تغييره كنوع أكبر من التحكم
4. أما هذا الكود Arial ,Verdana هو الخط وان كنت تستخدم خط مخصص في مدونتك استبدل الوسم بوسم الخط الخاص بك

طريقة استخدام الأزرار في المواضيع

قم بتحويل صندوق المواضيع من وضع التأليف الى وضع HTML

ثم أضف الكود التالي في المكان الذي تريد

<div class="mudwnpbutton ">
<a href="#" target="blank" rel="nofollow">معاينة</a></div>

1. نستبدل معاينة بأى كلمة نريد مثل معاينة او أى شئ
2. نستبدل هذا الرمز # بالرابط الذي نريد الزر أن يفتحه عند الضغط عليه
3. نستبدل mudwnpbutton بمعرف الزر الذي سنستخدمهم

ملاحظة : الزر الذي في المعاينة منسق و هذا الكود في الموضوع غير منسق و تركته هكذا لكي تقومو بتنسيقه كما تريدو
يمكنكم ترك تعليق لكي اساعدكم بتنسيق الزر اتمنى ان تعجبكون هذه الاضافة و يمكنك رؤية الزر بالضغط على المعاينة

معاينة

في امان الله 

مدونة مدون محترف

7/09/2014

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

اضافة ازرار CSS احترافية لمدونتك

4 / 5

بواسطة مدون محترف

مدون محترف 7/09/2014 6 تعليقات