مشخصات مقاله
آموزش ایجاد دکمه اعلان در سایت
آموزش ایجاد دکمه اعلان Notification Buttons در وبسایت
در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html اعلان Notification Buttons ایجاد کنیم.
قدم اول : کد HTML را اضافه کنید.
مثال :
1 2 3 4 5 | < a href = "#" class = "notification" > < span >Inbox</ span > < span class = "badge" >3</ span > </ a > < button ></ button > |
قدم دوم : کد CSS را اضافه کنید.
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .notification { background-color : #555 ; color : white ; text-decoration : none ; padding : 15px 26px ; position : relative ; display : inline- block ; border-radius: 2px ; } .notification:hover { background : red ; } .notification .badge { position : absolute ; top : -10px ; right : -10px ; padding : 5px 10px ; border-radius: 50% ; background : red ; color : white ; } <button></button> |
نمونه یک
1 2 3 4 5 6 7 | <p><h1>دکمه اعلان</h1></p> <p><a href= "#" class = "notification" ><br> <span>Inbox</span><br> <span class = "badge" >3</span><br> </a></p> <button></button> |
عکس دکمه اعلان Notification Buttons

1399/12/26
2131
581
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com