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

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

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

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

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

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>

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

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

معاينة

في امان الله

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

Unknown

اضف تعليق

اضافات بلوجر, مجانيات, CSS

الأربعاء، 9 يوليو 2014

عن الكاتب مدون محترف

إسمي شرف ملقب بي فيدي عمري حوالي 28 سنة مدون مغربي مهووس بجديد تكنولوجيا المعلوميات مهتم بالحماية المعلوماتية يمكنك متابعتي من خلال الفيسبوك أو. تويتر.أو. جوجل بلس

0000000000

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

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

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

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

عن الكاتب مدون محترف

مقالات قد تهمك