دکمه ها
سبک دکمه پیش فرض
<button type="button" class="btn btn-primary">اولیه</button>
<button type="button" class="btn btn-secondary">ثانویه</button>
<button type="button" class="btn btn-success">موفقیت</button>
<button type="button" class="btn btn-danger">خطر</button>
<button type="button" class="btn btn-warning">هشدار</button>
<button type="button" class="btn btn-info">اطلاعات</button>
<button type="button" class="btn btn-light">روشن</button>
<button type="button" class="btn btn-dark">تاریک</button>
دکمه ها با نماد
سبک دکمه پیشفرض
<button type="button" class="btn btn-primary"><i class="fa-solid fa-table-cells-large me-2"></i>اولیه</button>
<button type="button" class="btn btn-secondary"><i class="fa-solid fa-square me-2"></i>ثانویه</button>
<button type="button" class="btn btn-success"><i class="fa-solid fa-gear me-2"></i>موفقیت</button>
<button type="button" class="btn btn-danger"><i class="fa-solid fa-circle-exclamation me-2"></i>خطر</button>
<button type="button" class="btn btn-warning"><i class="fa-solid fa-image me-2"></i>هشدار</button>
<button type="button" class="btn btn-info"><i class="fa-solid fa-phone-volume me-2"></i>اطلاعات</button>
<button type="button" class="btn btn-light"><i class="fa-solid fa-lock me-2"></i>روشن</button>
<button type="button" class="btn btn-dark"><i class="fa-solid fa-circle-play me-2"></i>تاریک</button>
دکمه ها
سبک دکمه نور
<button type="button" class="btn light btn-primary">اولیه</button>
<button type="button" class="btn light btn-secondary">ثانویه</button>
<button type="button" class="btn light btn-success">موفقیت</button>
<button type="button" class="btn light btn-danger">خطر</button>
<button type="button" class="btn light btn-warning">هشدار</button>
<button type="button" class="btn light btn-info">اطلاعات</button>
<button type="button" class="btn light btn-light">نور</button>
<button type="button" class="btn light btn-dark">تاریک</button>
دکمه های طرح کلی
سبک دکمه طرح کلی پیشفرض
<button type="button" class="btn btn-outline-primary">اولیه</button>
<button type="button" class="btn btn-outline-secondary">ثانویه</button>
<button type="button" class="btn btn-outline-success">موفقیت</button>
<button type="button" class="btn btn-outline-danger">خطر</button>
<button type="button" class="btn btn-outline-warning">هشدار</button>
<button type="button" class="btn btn-outline-info">اطلاعات</button>
<button type="button" class="btn btn-outline-light">نور</button>
<button type="button" class="btn btn-outline-dark">تاریک</button>
اندازه های دکمه
برای تغییر سبک .btn-lg .btn-sm .btn-xs
را اضافه کنید
<button type="button" class="btn btn-primary btn-lg">دکمه بزرگ</button>
<button type="button" class="btn btn-primary">دکمه پیش فرض</button>
<button type="button" class="btn btn-primary btn-sm">دکمه کوچک</button>
<button type="button" class="btn btn-primary btn-xs">دکمه کوچک فوق العاده</button>
<button type="button" class="btn btn-primary btn-xxs">دکمه کوچک فوق العاده</button>
نماد اندازه های دکمه
برای تغییر سبک .btn-lg .btn-sm .btn-xs
را اضافه کنید
<button type="button" class="btn btn-primary btn-icon-lg"><i class="fa-solid fa-house-chimney"></i></button>
<button type="button" class="btn btn-primary btn-icon-md"><i class="fa-solid fa-house-chimney"></i></button>
<button type="button" class="btn btn-primary btn-icon-sm"><i class="fa-solid fa-house-chimney"></i></button>
<button type="button" class="btn btn-primary btn-icon-xs"><i class="fa-solid fa-house-chimney"></i></button>
<button type="button" class="btn btn-primary btn-icon-xxs"><i class="fa-solid fa-house-chimney"></i></button>
اندازه های دکمه Outline
برای تغییر سبک .btn-lg .btn-sm .btn-xs
را اضافه کنید
<button type="button" class="btn btn-outline-primary btn-lg">دکمه بزرگ</button>
<button type="button" class="btn btn-outline-primary">دکمه پیش فرض</button>
<button type="button" class="btn btn-outline-primary btn-md">دکمه کوچک</button>
<button type="button" class="btn btn-outline-primary btn-sm">دکمه کوچک</button>
<button type="button" class="btn btn-outline-primary btn-xs">دکمه کوچک فوق العاده</button>
دکمه های گرد
.btn-rounded
را برای تغییر سبک
<button type="button" class="btn btn-rounded btn-primary">اولیه</button>
<button type="button" class="btn btn-rounded btn-secondary">ثانویه</button>
<button type="button" class="btn btn-rounded btn-success">موفقیت</button>
<button type="button" class="btn btn-rounded btn-danger">خطر</button>
<button type="button" class="btn btn-rounded btn-warning">هشدار</button>
<button type="button" class="btn btn-rounded btn-info">اطلاعات</button>
<button type="button" class="btn btn-rounded btn-light">نور</button>
<button type="button" class="btn btn-rounded btn-dark">تاریک</button>
دکمه های طرح گرد
.btn-rounded
را برای تغییر سبک
<div class="rounded-button">
<button type="button" class="btn btn-rounded btn-outline-primary">اولیه</button>
<button type="button" class="btn btn-rounded btn-outline-secondary">ثانویه</button>
<button type="button" class="btn btn-rounded btn-outline-success">موفقیت</button>
<button type="button" class="btn btn-rounded btn-outline-danger">خطر</button>
<button type="button" class="btn btn-rounded btn-outline-warning">هشدار</button>
<button type="button" class="btn btn-rounded btn-outline-info">اطلاعات</button>
<button type="button" class="btn btn-rounded btn-outline-light">نور</button>
<button type="button" class="btn btn-rounded btn-outline-dark">تاریک</button>
</div>
دکمه سمت راست نمادها
add .btn-icon-end
to change the style
<button type="button" class="btn btn-primary">به سبد خرید اضافه کنید <span
class="btn-icon-end"><i class="fa fa-shopping-cart"></i></span>
</button>
<button type="button" class="btn btn-info">به لیست علاقه مندی ها اضافه کنید <span
class="btn-icon-end"><i class="fa fa-heart"></i></span>
</button>
<button type="button" class="btn btn-danger">Remove <span class="btn-icon-end"><i class="fas fa-times"></i></span>
</button>
<button type="button" class="btn btn-secondary">پیام ارسال کرد <span
class="btn-icon-end"><i class="fa fa-envelope"></i></span>
</button>
<button type="button" class="btn btn-warning">اضافه کردن نشانک <span
class="btn-icon-end"><i class="fa fa-star"></i></span>
</button>
<button type="button" class="btn btn-success">موفقیت <span class="btn-icon-end"><i
class="fa fa-check"></i></span>
</button>
دکمه سمت چپ نمادها
.btn-icon-start
را برای تغییر سبک
<button type="button" class="btn btn-rounded btn-primary"><span
class="btn-icon-start text-primary"><i class="fa fa-shopping-cart"></i>
</span>خرید کنید</button>
<button type="button" class="btn btn-rounded btn-info"><span
class="btn-icon-start text-info"><i class="fa fa-plus color-info"></i>
</span>اضافه کنید</button>
<button type="button" class="btn btn-rounded btn-danger"><span
class="btn-icon-start text-danger"><i class="fa fa-envelope color-danger"></i>
</span>ایمیل</button>
<button type="button" class="btn btn-rounded btn-secondary"><span
class="btn-icon-start text-secondary"><i
class="fa fa-share-alt color-secondary"></i> </span>اشتراکگذاری</button>
<button type="button" class="btn btn-rounded btn-warning"><span
class="btn-icon-start text-warning"><i class="fa fa-download color-warning"></i>
</span>دانلود کنید</button>
<button type="button" class="btn btn-rounded btn-success"><span
class="btn-icon-start text-success"><i class="fa fa-upload color-success"></i>
</span>آپلود کنید</button>
دکمه های مربعی
.btn-square
را برای تغییر سبک
<button type="button" class="btn btn-square btn-primary">اولیه</button>
<button type="button" class="btn btn-square btn-secondary">ثانویه</button>
<button type="button" class="btn btn-square btn-success">موفقیت</button>
<button type="button" class="btn btn-square btn-danger">خطر</button>
<button type="button" class="btn btn-square btn-warning">هشدار</button>
<button type="button" class="btn btn-square btn-info">اطلاعات</button>
<button type="button" class="btn btn-square btn-light">نور</button>
<button type="button" class="btn btn-square btn-dark">تاریک</button>
دکمه های طرح مربع
.btn-square
را برای تغییر سبک
<button type="button" class="btn btn-square btn-outline-primary">اولیه</button>
<button type="button" class="btn btn-square btn-outline-secondary">ثانویه</button>
<button type="button" class="btn btn-square btn-outline-success">موفقیت</button>
<button type="button" class="btn btn-square btn-outline-danger">خطر</button>
<button type="button" class="btn btn-square btn-outline-warning">هشدار</button>
<button type="button" class="btn btn-square btn-outline-info">اطلاعات</button>
<button type="button" class="btn btn-square btn-outline-light">نور</button>
<button type="button" class="btn btn-square btn-outline-dark">تاریک</button>
دکمه گرد
.btn-rounded
را برای تغییر سبک
<button type="button" class="btn btn-rounded btn-primary">اولیه</button>
<button type="button" class="btn btn-rounded btn-secondary">ثانویه</button>
<button type="button" class="btn btn-rounded btn-success">موفقیت</button>
<button type="button" class="btn btn-rounded btn-danger">خطر</button>
<button type="button" class="btn btn-rounded btn-warning">هشدار</button>
<button type="button" class="btn btn-rounded btn-info">اطلاعات</button>
<button type="button" class="btn btn-rounded btn-light">نور</button>
<button type="button" class="btn btn-rounded btn-dark">تاریک</button>
دکمه های طرح گرد
.btn-rounded
را برای تغییر سبک
<button type="button" class="btn btn-rounded btn-outline-primary">اولیه</button>
<button type="button" class="btn btn-rounded btn-outline-secondary">ثانویه</button>
<button type="button" class="btn btn-rounded btn-outline-success">موفقیت</button>
<button type="button" class="btn btn-rounded btn-outline-danger">خطر</button>
<button type="button" class="btn btn-rounded btn-outline-warning">هشدار</button>
<button type="button" class="btn btn-rounded btn-outline-info">اطلاعات</button>
<button type="button" class="btn btn-rounded btn-outline-light">نور</button>
<button type="button" class="btn btn-rounded btn-outline-dark">تاریک</button>
دکمه کشویی
سبک دکمه کشویی پیش فرض
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">اولیه</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">لینک کشویی</a>
<a class="dropdown-item" href="javascript:void(0);">لینک کشویی</a>
</div>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">ثانویه</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">لینک کشویی</a>
<a class="dropdown-item" href="javascript:void(0);">لینک کشویی</a>
</div>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">موفقیت</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">لینک کشویی</a>
<a class="dropdown-item" href="javascript:void(0);">لینک کشویی</a>
</div>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown">هشدار</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">لینک کشویی</a>
<a class="dropdown-item" href="javascript:void(0);">لینک کشویی</a>
</div>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">تاریک</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);">لینک کشویی</a>
<a class="dropdown-item" href="javascript:void(0);">لینک کشویی</a>
</div>
</div>
دکمه ها شفاف
سبک شفاف دکمه
<button type="button" class="btn tp-btn btn-primary">اولیه</button>
<button type="button" class="btn tp-btn btn-secondary">ثانویه</button>
<button type="button" class="btn tp-btn btn-success">موفقیت</button>
<button type="button" class="btn tp-btn btn-danger">خطر</button>
<button type="button" class="btn tp-btn btn-warning">هشدار</button>
<button type="button" class="btn tp-btn btn-info">اطلاعات</button>
<button type="button" class="btn tp-btn btn-light">نور</button>
<button type="button" class="btn tp-btn btn-dark">تاریک</button>
دکمه ها نور شفاف
سبک نور شفاف دکمه ای
<button type="button" class="btn tp-btn-light btn-primary">اولیه</button>
<button type="button" class="btn tp-btn-light btn-secondary">ثانویه</button>
<button type="button" class="btn tp-btn-light btn-success">موفقیت</button>
<button type="button" class="btn tp-btn-light btn-danger">خطر</button>
<button type="button" class="btn tp-btn-light btn-warning">هشدار</button>
<button type="button" class="btn tp-btn-light btn-info">اطلاعات</button>
<button type="button" class="btn tp-btn-light btn-light">نور</button>
<button type="button" class="btn tp-btn-light btn-dark">تاریک</button>
دکمه غیرفعال
disabled="disabled"
را برای تغییر سبک اضافه کنید
<button type="button" class="btn btn-rounded btn-primary" disabled="disabled">اولیه</button>
<button type="button" class="btn btn-rounded btn-secondary" disabled="disabled">ثانویه</button>
<button type="button" class="btn btn-rounded btn-success" disabled="disabled">موفقیت</button>
<button type="button" class="btn btn-rounded btn-danger" disabled="disabled">خطر</button>
<button type="button" class="btn btn-rounded btn-warning" disabled="disabled">هشدار</button>
<button type="button" class="btn btn-rounded btn-info" disabled="disabled">اطلاعات</button>
دکمه های نماد اجتماعی با نام
برای تغییر سبک، .btn-facebook، .btn-twitter، .btn-youtube...
را اضافه کنید
<button type="button" class="btn btn-facebook">فیسبوک <span class="btn-icon-end"><i class="fab fa-facebook-f"></i></span>
</button>
<button type="button" class="btn btn-twitter">توییتر <span class="btn-icon-end"><i class="fab fa-twitter"></i></span>
</button>
<button type="button" class="btn btn-youtube">یوتیوب <span class="btn-icon-end"><i class="fab fa-youtube"></i></span>
</button>
<button type="button" class="btn btn-instagram">اینستاگرام <span
class="btn-icon-end"><i class="fab fa-instagram"></i></span>
</button>
<button type="button" class="btn btn-pinterest">پینترست <span
class="btn-icon-end"><i class="fab fa-pinterest-square"></i></span>
</button>
<button type="button" class="btn btn-linkedin">لینکدین <span class="btn-icon-end"><i class="fab fa-linkedin-in"></i></span>
</button>
<button type="button" class="btn btn-google-plus">گوگل + <span
class="btn-icon-end"><i class="fab fa-google-plus-g"></i></span>
</button>
<button type="button" class="btn btn-google">گوگل <span class="btn-icon-end"><i class="fab fa-google"></i></span>
</button>
<button type="button" class="btn btn-snapchat">اسنپ چت <span class="btn-icon-end"><i class="fab fa-snapchat"></i></span>
</button>
<button type="button" class="btn btn-whatsapp">واتساپ <span class="btn-icon-end"><i class="fab fa-whatsapp"></i></span>
</button>
<button type="button" class="btn btn-tumblr">وبلاگ Tumblr <span class="btn-icon-end"><i class="fab fa-tumblr"></i></span>
</button>
<button type="button" class="btn btn-reddit">ردیت <span class="btn-icon-end"><i class="fab fa-reddit"></i></span>
</button>
<button type="button" class="btn btn-spotify">اسپاتیفای <span class="btn-icon-end"><i class="fab fa-spotify"></i></span>
</button>
<button type="button" class="btn btn-yahoo">یاهو <span class="btn-icon-end"><i class="fab fa-yahoo"></i></span>
</button>
<button type="button" class="btn btn-dribbble">دریبل <span class="btn-icon-end"><i class="fab fa-dribbble"></i></span>
</button>
<button type="button" class="btn btn-skype">اسکایپ <span class="btn-icon-end"><i class="fab fa-skype"></i></span>
</button>
<button type="button" class="btn btn-quora">کوورا <span class="btn-icon-end"><i class="fab fa-quora"></i></span>
</button>
<button type="button" class="btn btn-vimeo">ویمیو <span class="btn-icon-end"><i class="fab fa-vimeo-v"></i></span>
</button>