[ شرح طريقة ] : عمل زر مع رقم فوقه مثل الفيس بوك

[linnou]

http://www.dzbatna.com/images/icons/iconrote.gif [ ط´ط±ط* ] : ط¹ظ…ظ„ ط²ط± ظ…ط¹ ط±ظ‚ظ… ظپظˆظ‚ظ‡ ظ…ط«ظ„ ط§ظ„ظپظٹط³ ط¨ظˆظƒ (http://www.dzbatna.com/t2033412/)



السلام عليكم ورحمة الله و بركاته

اتمنى ان الكل يكون بخير و

مشروعي اليوم هو شرح طريقة عمل زر مع رقم يكون فوقه مثل تنبيهات الفيس بوك


♥ أترككم أولا مع المثال المصور


http://www.dzbatna.com/attachments/626948d1328368861-dev.png


♥ شرح طريقة التركيب install

نأتي لخيارات الــ CSS :

رمز PHP:

<code style="white-space:nowrap"> <code> body {background:#444444;text-align:center;margin-top:150px;}
.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);
}
</code> </code>

♥ كود code لــ HTML نضيفه في المكان الذي نريد وضع الزر فيه :

رمز PHP:

<code style="white-space:nowrap"> <code> <a href="#" class="btn">:: dev-vb ::<span>2</span></a>
<a href="#" class="btn">:: dzbatna ::<span>4</span></</a>
</code> </code>




♥ أتمنى أني وفقت في الشرح طريقة | اذا أعجبك موضوعي لا تنسى تقييمي http://www.dzbatna.com/images/smilies/cupidarrow.gif







ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©