دکمه رابط کاربری | قالب مدیریت و داشبورد میربال

دکمه پیش فرض

با اضافه کردن دکمه ها در بوت استرپ ایجاد کنید .btn کلاس همراه با کلاس های متنی مانند .btn-primary, .btn-ثانویه، یا .btn-موفقیت برای استایل دادن به دکمه

استفاده کنید .btn کلاس برای ایجاد دکمه در بوت استرپ. را اضافه کنید .قرص گرد کلاس برای دادن لبه های گرد به دکمه و ایجاد یک دکمه قرص شکل.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link link-primary">Link</button>
<button type="button" class="btn rounded-pill btn-primary">Primary</button>
<button type="button" class="btn rounded-pill btn-secondary">Secondary</button>
<button type="button" class="btn rounded-pill btn-success">Success</button>
<button type="button" class="btn rounded-pill btn-info">Info</button>
<button type="button" class="btn rounded-pill btn-warning">Warning</button>
<button type="button" class="btn rounded-pill btn-danger">Danger</button>
<button type="button" class="btn rounded-pill btn-dark">Dark</button>
<button type="button" class="btn rounded-pill btn-light">Light</button>
<button type="button" class="btn rounded-pill btn-link link-primary">Link</button>

دکمه نور

با استفاده از دکمه های با تم سبک در بوت استرپ ایجاد کنید .btn-light کلاس شما همچنین می توانید تغییراتی مانند .btn-light-primary یا .btn-light-secondary برای لهجه های رنگی مختلف

با ترکیب کردن دکمه‌هایی با تم سبک و به شکل قرص در Bootstrap ایجاد کنید btn-light-* کلاس با .قرص گرد. این به دکمه رنگ روشن و لبه های گرد می دهد تا ظاهری براق داشته باشد.

<button type="button" class="btn btn-light-primary">Primary</button>
<button type="button" class="btn btn-light-secondary">Secondary</button>
<button type="button" class="btn btn-light-success">Success</button>
<button type="button" class="btn btn-light-info">Info</button>
<button type="button" class="btn btn-light-warning">Warning</button>
<button type="button" class="btn btn-light-danger">Danger</button>
<button type="button" class="btn btn-light-dark">Dark</button>
<button type="button" class="btn rounded-pill btn-light-primary">Primary</button>
<button type="button" class="btn rounded-pill btn-light-secondary">Secondary</button>
<button type="button" class="btn rounded-pill btn-light-success">Success</button>
<button type="button" class="btn rounded-pill btn-light-info">Info</button>
<button type="button" class="btn rounded-pill btn-light-warning">Warning</button>
<button type="button" class="btn rounded-pill btn-light-danger">Danger</button>
<button type="button" class="btn rounded-pill btn-light-dark">Dark</button>

دکمه طرح کلی

ایجاد دکمه های طرح کلی در بوت استرپ با استفاده از btn-outline-* کلاس این به دکمه یک حاشیه و پس‌زمینه شفاف می‌دهد، با تغییرات رنگی مانند btn-outline-primary یا .btn-outline-secondary.

با استفاده از دکمه های طرح کلی با لبه های گرد در بوت استرپ ایجاد کنید btn-outline-* کلاس همراه با .قرص گرد. این ترکیب یک دکمه شفاف با طراحی براق و قرصی شکل است.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn rounded-pill btn-outline-primary">Primary</button>
<button type="button" class="btn rounded-pill btn-outline-secondary">Secondary</button>
<button type="button" class="btn rounded-pill btn-outline-success">Success</button>
<button type="button" class="btn rounded-pill btn-outline-info">Info</button>
<button type="button" class="btn rounded-pill btn-outline-warning">Warning</button>
<button type="button" class="btn rounded-pill btn-outline-danger">Danger</button>
<button type="button" class="btn rounded-pill btn-outline-dark">Dark</button>

دکمه سایه

ایجاد دکمه های متنی در بوت استرپ با استفاده از btn-text-* کلاس این کار پس‌زمینه و حاشیه را حذف می‌کند و فقط متن را به‌عنوان یک دکمه استایل‌بندی می‌کند.

<button type="button" class="btn btn-shadow-primary">Primary</button>
<button type="button" class="btn btn-shadow-secondary">Secondary</button>
<button type="button" class="btn btn-shadow-success">Success</button>
<button type="button" class="btn btn-shadow-info">Info</button>
<button type="button" class="btn btn-shadow-warning">Warning</button>
<button type="button" class="btn btn-shadow-danger">Danger</button>
<button type="button" class="btn btn-shadow-dark">Dark</button>

دکمه متن

<button type="button" class="btn btn-text-primary">Primary</button>
<button type="button" class="btn btn-text-secondary">Secondary</button>
<button type="button" class="btn btn-text-success">Success</button>
<button type="button" class="btn btn-text-info">Info</button>
<button type="button" class="btn btn-text-warning">Warning</button>
<button type="button" class="btn btn-text-danger">Danger</button>
<button type="button" class="btn btn-text-dark">Dark</button>

اندازه دکمه ها

با استفاده از کلاس های اندازه، اندازه دکمه ها را در Bootstrap تنظیم کنید .btn-sm برای دکمه های کوچکتر و .btn-lg برای دکمه های بزرگتر اندازه پیش فرض زمانی اعمال می شود که از کلاس اندازه استفاده نشده باشد.

<!-- Small Button -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>

<!-- Normal Button -->
<button type="button" class="btn btn-primary">Large button</button>

<!-- Large Button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>

دکمه های اجتماعی

<button type="button" class="btn btn-facebook icon-btn">
  <i class="ri-facebook-fill"></i>
</button>
<button type="button" class="btn btn-google icon-btn">
  <i class="ri-google-fill"></i>
</button>
<button type="button" class="btn btn-twitter icon-btn">
  <i class="ri-twitter-fill"></i>
</button>
<button type="button" class="btn btn-instagram icon-btn">
  <i class="ri-instagram-fill"></i>
</button>
<button type="button" class="btn btn-youtube icon-btn">
  <i class="ri-youtube-fill"></i>
</button>
<button type="button" class="btn btn-linkedin icon-btn">
  <i class="ri-linkedin-box-fill"></i>
</button>

<button type="button" class="btn btn-light-facebook icon-btn">
  <i class="ri-facebook-fill"></i>
</button>
<button type="button" class="btn btn-light-google icon-btn">
  <i class="ri-google-fill"></i>
</button>
<button type="button" class="btn btn-light-twitter icon-btn">
  <i class="ri-twitter-fill"></i>
</button>
<button type="button" class="btn btn-light-instagram icon-btn">
  <i class="ri-instagram-fill"></i>
</button>
<button type="button" class="btn btn-light-youtube icon-btn">
  <i class="ri-youtube-fill"></i>
</button>
<button type="button" class="btn btn-light-linkedin icon-btn">
  <i class="ri-linkedin-box-fill"></i>
</button>
<button type="button" class="btn btn-outline-facebook icon-btn">
    <i class="ri-facebook-fill"></i>
</button>
<button type="button" class="btn btn-outline-google icon-btn">
    <i class="ri-google-fill"></i>
</button>
<button type="button" class="btn btn-outline-twitter icon-btn">
    <i class="ri-twitter-fill"></i>
</button>
<button type="button" class="btn btn-outline-instagram icon-btn">
    <i class="ri-instagram-fill"></i>
</button>
<button type="button" class="btn btn-outline-youtube icon-btn">
    <i class="ri-youtube-fill"></i>
</button>
<button type="button" class="btn btn-outline-linkedin icon-btn">
    <i class="ri-linkedin-box-fill"></i>
</button>

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

با ترکیب کردن دکمه های آیکون در بوت استرپ ایجاد کنید .btn کلاس با یک نماد، مانند استفاده از یک نماد از کتابخانه ای مانند Remix Icon. این به شما امکان می دهد عناصر بصری را در کنار متن دکمه اضافه کنید.

ایجاد دکمه های آیکون در بوت استرپ با استفاده از .icon-btn کلاس همراه با یک نماد از یک کتابخانه نماد. این کلاس، دکمه را به گونه‌ای طراحی می‌کند که یک نماد را در خود جای دهد و آن را از نظر بصری جذاب و کاربردی می‌کند.

<button type="button" class="btn btn-primary">
  <i class="ri-star-line me-2"></i>
  Primary
</button>
<button type="button" class="btn rounded-pill btn-primary">
  <i class="ri-star-line me-2"></i>
  Primary
</button>
<button type="button" class="btn btn-secondary">
  <i class="ri-notification-4-line me-2"></i>
  Secondary
</button>
<button type="button" class="btn rounded-pill btn-secondary">
  <i class="ri-notification-4-line me-2"></i>
  Secondary
</button>
<button type="button" class="btn btn-light-primary">
  <i class="ri-star-line me-2"></i>
  Primary
</button>
<button type="button" class="btn rounded-pill btn-light-primary">
  <i class="ri-star-line me-2"></i>
  Primary
</button>
<button type="button" class="btn btn-light-secondary">
  <i class="ri-notification-4-line me-2"></i>
  Secondary
</button>
<button type="button" class="btn rounded-pill btn-light-secondary">
  <i class="ri-notification-4-line me-2"></i>
  Secondary
</button>
<button type="button" class="btn btn-outline-primary">
  <i class="ri-star-line me-2"></i>
  Primary
</button>
<button type="button" class="btn rounded-pill btn-outline-primary">
  <i class="ri-star-line me-2"></i>
  Primary
</button>
<button type="button" class="btn btn-outline-secondary">
  <i class="ri-notification-4-line me-2"></i>
  Secondary
</button>
<button type="button" class="btn rounded-pill btn-outline-secondary">
  <i class="ri-notification-4-line me-2"></i>
  Secondary
</button>
<button type="button" class="btn btn-primary icon-btn">
  <i class="ri-star-line"></i>
</button>
<button type="button" class="btn btn-secondary icon-btn">
  <i class="ri-notification-4-line"></i>
</button>
<button type="button" class="btn btn-primary rounded-pill icon-btn">
  <i class="ri-star-line"></i>
</button>
<button type="button" class="btn btn-secondary rounded-pill icon-btn">
  <i class="ri-notification-4-line"></i>
</button>

<button type="button" class="btn btn-light-primary icon-btn">
  <i class="ri-star-line"></i>
</button>
<button type="button" class="btn btn-light-secondary icon-btn">
  <i class="ri-notification-4-line"></i>
</button>
<button type="button" class="btn btn-light-primary rounded-pill icon-btn">
  <i class="ri-star-line"></i>
</button>
<button type="button" class="btn btn-light-secondary rounded-pill icon-btn">
  <i class="ri-notification-4-line"></i>
</button>

<button type="button" class="btn btn-outline-primary icon-btn">
  <i class="ri-star-line"></i>
</button>
<button type="button" class="btn btn-outline-secondary icon-btn">
  <i class="ri-notification-4-line"></i>
</button>
<button type="button" class="btn btn-outline-primary rounded-pill icon-btn">
  <i class="ri-star-line"></i>
</button>
<button type="button" class="btn btn-outline-secondary rounded-pill icon-btn">
  <i class="ri-notification-4-line"></i>
</button>

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

ایجاد دکمه های آیکون در بوت استرپ با استفاده از .icon-btn کلاس اندازه را با .icon-btn-sm برای دکمه‌های کوچک‌تر، امکان طراحی فشرده و در عین حال گنجاندن آیکون‌ها.

<button type="button" class="btn btn-primary icon-btn-sm">
  <i class="ri-home-2-line"></i>
</button>
<button type="button" class="btn btn-primary icon-btn">
  <i class="ri-home-2-line"></i>
</button>
<button type="button" class="btn btn-primary icon-btn-lg">
  <i class="ri-home-2-line"></i>
</button>

دکمه های تعویض سفارشی

با استفاده از دکمه های جابجایی سفارشی در بوت استرپ ایجاد کنید .btn-loader کلاس برای نشان دادن وضعیت بارگذاری. به طور پیش فرض، استفاده کنید نشانگر-برچسب برای متن دکمه، که به .شاخص-پیشرفت پس از کلیک برای نشان دادن روند بارگیری.

<button type="button" class="btn btn-primary btn-loader">
  <span class="indicator-label">
    Submit
  </span>
  <span class="indicator-progress flex gap-2 align-items-center">
    <span>Loading...</span>
    <i class="ri-loader-2-fill"></i>
  </span>
</button>
<button type="button" class="btn btn-danger btn-loader">
  <span class="indicator-label">
    Submit
  </span>
  <span class="indicator-progress flex gap-2 align-items-center">
    <span>Please Wait...</span>
    <i class="ri-loader-2-fill"></i>
  </span>
</button>
<button type="button" class="btn btn-primary custom-toggle" data-bs-toggle="button">
  <span class="icon-on">
    <i class="ri-add-line align-bottom me-1"></i> Unfollow
  </span>
  <span class="icon-off">
    <i class="ri-user-unfollow-line align-bottom me-1"></i> Follow
  </span>
</button>
<button type="button" class="btn btn-primary custom-toggle" data-bs-toggle="button">
  <span class="icon-on">
    Inactive
  </span>
  <span class="icon-off">
    Active
  </span>
</button>
<button type="button" class="btn btn-dark icon-btn custom-toggle" data-bs-toggle="button">
  <span class="icon-on">
    <i class="ri-bookmark-line"></i>
  </span>
  <span class="icon-off">
    <i class="ri-bookmark-fill"></i>
  </span>
</button>
<button type="button" class="btn btn-success icon-btn custom-toggle" data-bs-toggle="button">
  <span class="icon-on">
    <i class="ri-heart-line"></i>
  </span>
  <span class="icon-off">
    <i class="ri-heart-fill"></i>
  </span>
</button>

در حال بارگذاری انیمیشن ها

اضافه کردن انیمیشن های بارگیری در بوت استرپ با استفاده از .btn-loader کلاس گنجاندن .اسپینر-رشد یا .spinner-border کلاس هایی برای نشان دادن انواع مختلف اسپینرها، ارائه بازخورد بصری در طول فرآیندهای بارگذاری.

<button type="button" class="btn btn-primary btn-loader">
  <span class="d-flex gap-2 align-items-center">
    <span class="flex-grow-1">
      Loading...
    </span>
    <span class="flex-shrink-0">
      <i class="ri-loader-2-fill"></i>
      <span class="visually-hidden">Loading...</span>
    </span>
  </span>
</button>
<button type="button" class="btn btn-secondary btn-loader">
  <span class="d-flex gap-2 align-items-center">
    <span class="flex-grow-1">
      Please Wait...
    </span>
    <span class="flex-shrink-0">
      <i class="ri-refresh-line"></i>
      <span class="visually-hidden">Please Wait...</span>
    </span>
  </span>
</button>
<button type="button" class="btn btn-primary">
  <span class="d-flex align-items-center">
    <span class="spinner-border spinner-border-sm me-2 flex-shrink-0" role="status">
      <span class="visually-hidden">Loading...</span>
    </span>
    <span class="flex-grow-1 ms-2">
      Loading...
    </span>
  </span>
</button>
<button type="button" class="btn btn-secondary">
  <span class="d-flex align-items-center">
    <span class="flex-grow-1 me-2">
      Wait...
    </span>
    <span class="spinner-border spinner-border-sm me-2 flex-shrink-0" role="status">
      <span class="visually-hidden">Wait...</span>
    </span>
  </span>
</button>
<button type="button" class="btn btn-success icon-btn">
  <span class="spinner-grow spinner-grow-sm flex-shrink-0" role="status">
    <span class="visually-hidden">Wait...</span>
  </span>
</button>
<button type="button" class="btn btn-success icon-btn">
  <span class="spinner-border spinner-border-sm flex-shrink-0" role="status">
    <span class="visually-hidden">Wait...</span>
  </span>
</button>

دکمه عرض کامل

یک دکمه با عرض کامل در بوت استرپ با استفاده از .w-100 کلاس همراه با .btn کلاس این باعث می شود که دکمه کشیده شود تا ظرف خود را پر کند و اطمینان حاصل شود که کل عرض موجود را اشغال می کند.

<button class="btn btn-primary w-100" type="button">Button</button>
<button class="btn btn-secondary w-100" type="button">Button</button>

<button class="btn btn-light-primary w-100" type="button">Button</button>
<button class="btn btn-light-secondary w-100" type="button">Button</button>

<button class="btn btn-outline-primary w-100" type="button">Button</button>
<button class="btn btn-outline-secondary w-100" type="button">Button</button>

یک کار جدید دارید

یک پیام از نایومی

شما ادمین شدید

یک پیام از رابرت

پرداخت از جاناتان

کامنت جدید روی پست شما

پیام جدید از اما

یادآوری: جلسه 3 عصر

نامه از مارکتینگ

پیام سیستم: آپدیت شد

پیام از کلارا

تسک جدید: طراحی یوای

ارسال گزارش پروژه

اتمام تسک: ای پی ای اینتگرید شد

کد ریویو: در انتظار تایید

همه مشاهده شد

229 تومان

146 تومان

220 تومان

40 تومان

99 تومان

₹129

دکمه

دکمه

نمای کلی صفحه

دکمه پیش فرض

دکمه نور

دکمه طرح کلی

دکمه سایه

دکمه متن

اندازه دکمه ها

دکمه های اجتماعی

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

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

دکمه های تعویض سفارشی

در حال بارگذاری انیمیشن ها

دکمه عرض کامل

سفارشی سازی تم

طرح بندی:

عمودی

افقی

نیم جعبه

عرض محتوا:

پیش فرض

جعبه

جهت چیدمان:

LTR

RTL

حالت چیدمان:

نور

تاریک

سیستم

اندازه نوار کناری:

پیش فرض

متوسط

نماد

نماد شناور

رنگ نوار کناری

رنگ اولیه