دکمه و آیکون ها

دکمه های پیشفرض بوت‌استرپ با قالب کاملا سازگار هستند، این سیستم یک سبک اختصاصی پیشرفته از سیستم بوت‌استرپ است.

دکمه‌های بوت‌استرپ عالی هستند، اما ما میخواستیم به آن‌ها جلوه موبایل مانند بیشتری بدهیم و طراحی آنها را گسترش دهیم تا حتی بهتر به نظر برسند. با این گفته، میتوانید از هر دکمه بوت‌استرپ یا از دکمه های موجود در component-buttons.html استفاده کنید.

html

<a href="#" class="btn UTILITY_CLASSES_HERE">Button</a>

جایگزینی کلاس UTLITY_CLASSES_HERE با کلاس های خود

کلاس دکمه‌ها مشابه بوت‌استرپ است، اما با اضافه شدن چند کلاس کاربردی، میتوانیم زیبایی این دکمه‌ها بینهایت افزایش دهیم. هر یک از کلاس های کمکی زیر را به دکمه های مورد نظر خود اضافه کنید. میتوانید از چندین کلاس کمکی به صورت ترکیبی استفاده کنید.

• کنترل اندازه ها

  • btn-xs
  • btn-s
  • btn-sm
  • btn-m
  • btn-l
  • btn-xl
  • btn-xx

• مکان

  • btn-center-s
  • btn-center-m
  • btn-center-l
  • btn-full

• رنگ و پس زمینه ها - نمایش همه

  • bg-yourColor
  • color-yourColor

• اندازه فونت، سایه‌ها، متن - نمایش کلاس ها ثانویه

استایل دکمه ها

فرض کنید میخواهید یک دکمه با اندازه متوسط ایجاد کنید، که عرضی کامل با گوشه‌های گرد و یک سایه بزرگ دارد و از پس‌ زمینه صفحه شما استفاده میکند و یک متن پررنگ سفید دارد.

html

<a
  href="#"
  class="btn btn-m rounded-sm shadow-xl bg-highlight color-white font-900"
  >Button</a
>

همانطور که میبینید، کد، فوق العاده ساده است، به سادگی کلاس هایی را که میخواهید، به آن اضافه کنید تا سبک جدیدی به آن بدهید.

دکمه های سه بعدی

برای استفاده از دکمه های سه بعدی، باید از دو bg-color به عنوان کلاس رنگ های کمکی استفاده کنید. یک رنگ تیره برای پارامتر پس زمینه و یک رنگ روشن برای حاشیه. همچنین، حتما کلاس btn-3d را اضافه کنید:

html

<a href="#" class="btn btn-3d btn-m bg-red-dark border-red-light">Button</a>

آیکون ها

آیکون ها تقریباً بر اساس مفهوم دکمه ها هستند، تنها تفاوت این است که آیکون ها با استفاده از کلاس آیکون از تراز وسط چین پشتیبانی نمیکنند. میتوانید آیکون‌ها را با اضافه کردن آنها در داخل یک پاراگراف و دادن کلاس text-center به آن پاراگراف در مرکز قرار دهید.
گذشته از این، آیکون‌ها نیز به همین روش ساخته میشوند. بیایید یک مثال بزنیم:

html

<a href="#" class="icon icon-xs rounded-xl bg-facebook"><i class="fab fa-facebook"></i></a>

• کنترل اندازه ها
  • icon-xs
  • icon-s
  • icon-sm
  • icon-m
  • icon-l
  • icon-xl
  • icon-xxl