یه تابستون متفاوت با یه تصمیم هوشمندانه! دوره هوش مصنوعی با تخفیف ویژه، فقط با کد AI84 دوره هوش مصنوعی با تخفیف ویژه، فقط با کد AI84
🎯 ثبت نام

آموزش طراحی دکمه ایکون در 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 -->
 
                    <!-- 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  

آموزش ایجاد دکمه آیکون Icon Buttons در وب
1399/12/26 4818 657
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com
نظرات شما

نظرات خود را ثبت کنید...