آموزش طراحی دکمه ایکون در website

آموزش ایجاد دکمه آیکون Icon Buttons در وب

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html آیکون Icon Buttons ایجاد کنیم.

قدم اول : کد HTML را اضافه کنید.
مثال :

              <!-- 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 را اضافه کنید.
مثال :

                /* 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>

نمونه یک

<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 4852 665

دانلود PDF

دانلود سورس کد

رمز عبور : tahlildadeh.com یا www.tahlildadeh.com

سوالات و نظرات

نظرات شما