কিভাবে তৈরি করা হয়: আইকন বাটন

আইকন বাটন কিভাবে তৈরি করা হয়

প্রথম পদক্ষেপ - HTML যোগ করুন:

আইকন লাইব্রেরি যোগ করুন, যেমন font Awesome, এবং আইকনকে HTML বাটনে জুড়িয়ে দিন:

<!-- আইকন লাইব্রেরি যোগ করুন -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Font Awesome আইকন বাটনে যোগ করা -->
<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>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করা:

/* বাটনের শৈলী সেট করা */
.btn {
  background-color: DodgerBlue; /* নীল পিছনভাগ */
  border: none; /* কোনো হুকের অপসারণ */
  color: white; /* সাদা লেখা */
  padding: 12px 16px; /* কিছু অভ্যন্তরীণ মাঝারি */
  font-size: 16px; /* ফন্ট আকার সেট করা */
  cursor: pointer; /* মাউস স্থানান্তরিত হলে মাউস ইনডিকেটর */
}
/* মাউস স্থানান্তরিত হলে পিছনভাগ গোলাপী হয় */
.btn:hover {
  background-color: RoyalBlue;
}

亲自试一试

相关页面

教程：আইকন শিক্ষাদত্তা

教程：সিএসএস বাটন