[ html-css ] شرح عمل زر مع رقم فوقه

[ html-css ] شرح عمل زر مع رقم فوقه

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .

[ html-css ] شرح عمل زر مع رقم فوقه

موضوعنا اليوم جميل ورائع عن طريقة انشاء ازرار وفوقها ارقام , زر وفوقه رقم , الزر جميل صراحه وهو مصنوع من الـ html + css يعطي موقع جماليه اكثر من المعتاد .

صورة : 

[ html-css ] شرح عمل زر مع رقم فوقه

مثال مباشر : هنا

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

• ادخل مدونتك.
• القالب.
• حرر القالب وابحث عن ]]></b:skin>
• ضع هذا الكود فوقها : 

.btn {
    position:relative;
    display:inline-block;  
    text-decoration: none;
    color:white;
    padding: 6px 12px 8px 12px;
    background: #3B3B3B;
    font-family: Tahoma, sans-serif;


    font-size:11px;
    margin-right: 15px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;  
    border-radius: 3px;
    border:1px solid #282828;
    -moz-box-shadow: inset 0 0 1px rgba(255,255,255,0.1) , inset 0 1px 0 rgba(255,255,255,0.08) , 0 1px 0 rgba(255,255,255,0.05) , inset 0 8px 20px rgba(255,255,255,0.06);
    -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.1) , inset 0 1px 0 rgba(255,255,255,0.08) , 0 1px 0 rgba(255,255,255,0.05) , inset 0 8px 20px rgba(255,255,255,0.06);  
    box-shadow: inset 0 0 1px rgba(255,255,255,0.1) , inset 0 1px 0 rgba(255,255,255,0.08) , 0 1px 0 rgba(255,255,255,0.05) , inset 0 8px 20px rgba(255,255,255,0.06);
}
.btn:hover,
.btn:focus {
    background:#373737;
}
.btn span{
    position: absolute;
    top: -10px;
    right:-8px;
    font-size: 9px;
    padding:3px 5px;
    background:#F03D25;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;  
    border-radius: 8px;  
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.4);
    box-shadow:0 0 10px rgba(0,0,0,0.4);
} 

• الان ضع هذا الكود اين ماتشاء , في التخطيط او في القالب في اي مكان : 

  <a href="http://blog.7lolblogger.com/" class="btn">:: 7LOL BLOGGER<span>2</span></a>
  <a href="http://blog.7lolblogger.com/" class="btn">:: حلول بلوجر ::<span>4</span></</a>

مع تغير الرابط واسم الزر

عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة

صورة التدوينة

عنوان التدوينة :[ html-css ] شرح عمل زر مع رقم فوقه

ملخص التدوينة:

[ html-css ] شرح عمل زر مع رقم فوقه بسم الله الرحمن الرحيم والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم ...

goust

الساعه : 2014-04-17T14:52:00+03:00

تاريخ : 17‏/04‏/2014

من : المملكة العربيه السعوديه

التعليقات : 14

انشرها :

تاق :