چگونه ایجاد می‌شود: دکمه نماد

چگونه دکمه نماد ایجاد کنید

قدم اول - اضافه کردن HTML:

کتابخانه نمادها را اضافه کنید، مثلاً font Awesome، و نمادها را به دکمه‌های HTML متصل کنید:

<!-- شامل کتابخانه نمادها -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- بٹن میں فونٹ اے وی کا آئیکون شامل کریں -->
<p>مٹکا بٹن:</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>مٹکا بٹن ساتھ متنی:</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;
}

آپ خود بچار کریں

مرتبط پیج

درستکاری:آئیکن درستکاری

درستکاری:CSS بٹن