شرح عمل ارقام فوق الكتابة ! اضافة جميلة !

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

[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://the6professional.blogspot.com/" class="btn">:: 7LOL BLOGGER<span>2</span></a>
  <a href="http://the6professional.blogspot.com/" class="btn">:: مهووس التدوين ::<span>4</span></</a>

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