موضوعنا اليوم جميل ورائع عن طريقة انشاء ازرار وفوقها ارقام

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

[ 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>

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