مشخصات مقاله
آموزش طراحی دکمه ایکون در website
آموزش ایجاد دکمه آیکون Icon Buttons در وب
در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html آیکون Icon Buttons ایجاد کنیم.
قدم اول : کد HTML را اضافه کنید.
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!-- Add icon library --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" > <!-- Add font awesome icons to buttons --> < p >Icon buttons:</ p > < button class = "btn" >< i class = "fa fa-home" ></ i ></ button > < button class = "btn" >< i class = "fa fa-bars" ></ i ></ button > < button class = "btn" >< i class = "fa fa-trash" ></ i ></ button > < button class = "btn" >< i class = "fa fa-close" ></ i ></ button > < button class = "btn" >< i class = "fa fa-folder" ></ i ></ button > < p >Icon buttons with text:</ p > < button class = "btn" >< i class = "fa fa-home" ></ i > Home</ button > < button class = "btn" >< i class = "fa fa-bars" ></ i > Menu</ button > < button class = "btn" >< i class = "fa fa-trash" ></ i > Trash</ button > < button class = "btn" >< i class = "fa fa-close" ></ i > Close</ button > < button class = "btn" >< i class = "fa fa-folder" ></ i > Folder</ button > < button ></ button > |
قدم دوم : کد CSS را اضافه کنید.
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /* Style buttons */ .btn { background-color : DodgerBlue; /* Blue background */ border : none ; /* Remove borders */ color : white ; /* White text */ padding : 12px 16px ; /* Some padding */ font-size : 16px ; /* Set a font size */ cursor : pointer ; /* Mouse pointer on hover */ } /* Darker background on mouse-over */ .btn:hover { background-color : RoyalBlue; } <button></button> |
نمونه یک
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <p><h2>دکمه های آیکون </h2><br> <p>دکمه های آیکون :</p><br> <button class = "btn" ><i class = "fa fa-home" ></i></button><br> <button class = "btn" ><i class = "fa fa-bars" ></i></button><br> <button class = "btn" ><i class = "fa fa-trash" ></i></button><br> <button class = "btn" ><i class = "fa fa-close" ></i></button><br> <button class = "btn" ><i class = "fa fa-folder" ></i></button></p> <p><p>دکمه های آیکون با متن:</p><br> <button class = "btn" ><i class = "fa fa-home" ></i> Home</button><br> <button class = "btn" ><i class = "fa fa-bars" ></i> Menu</button><br> <button class = "btn" ><i class = "fa fa-trash" ></i> Trash</button><br> <button class = "btn" ><i class = "fa fa-close" ></i> Close</button><br> <button class = "btn" ><i class = "fa fa-folder" ></i> Folder</button><br> </p> <button></button> |
نمونه دکمه آیکون Icon Buttons

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