دکمه ها

دکمه های پیش فرض


<button type="button" class="btn btn-primary fw-semibold text-white py-2 px-4 mt-2 me-2">اولیه</button>
<button type="button" class="btn btn-secondary fw-semibold text-white py-2 px-4 mt-2 me-2">ثانوی</button>
<button type="button" class="btn btn-success fw-semibold text-white py-2 px-4 mt-2 me-2">موفقیت</button>
<button type="button" class="btn btn-danger fw-semibold text-white py-2 px-4 mt-2 me-2">خطر</button>
<button type="button" class="btn btn-warning fw-semibold text-white py-2 px-4 mt-2 me-2">هشدار</button>
<button type="button" class="btn btn-info fw-semibold text-white py-2 px-4 mt-2 me-2">اطلاعات</button>
<button type="button" class="btn btn-light fw-semibold text-white py-2 px-4 mt-2 me-2">روشن</button>
<button type="button" class="btn btn-dark fw-semibold text-white py-2 px-4 mt-2 me-2">تاریک</button>
<button type="button" class="btn btn-link fw-semibold text-white py-2 px-4 mt-2 me-2">لینک</button>

دکمه های طرح کلی


<button type="button" class="btn btn-outline-primary fw-semibold py-2 px-4 mt-2 me-2 hover-white">اولیه</button>
<button type="button" class="btn btn-outline-secondary fw-semibold py-2 px-4 mt-2 me-2 hover-white">ثانوی</button>
<button type="button" class="btn btn-outline-success fw-semibold py-2 px-4 mt-2 me-2 hover-white">موفقیت</button>
<button type="button" class="btn btn-outline-danger fw-semibold py-2 px-4 mt-2 me-2 hover-white">خطر</button>
<button type="button" class="btn btn-outline-warning fw-semibold py-2 px-4 mt-2 me-2 hover-white">هشدار</button>
<button type="button" class="btn btn-outline-info fw-semibold py-2 px-4 mt-2 me-2 hover-white">اطلاعات</button>
<button type="button" class="btn btn-outline-light fw-semibold py-2 px-4 mt-2 me-2 hover-white">روشن</button>
<button type="button" class="btn btn-outline-dark fw-semibold py-2 px-4 mt-2 me-2 hover-white">تاریک</button>

دکمه های نرم


<button type="button" class="btn bg-primary bg-opacity-10 fw-semibold text-primary py-2 px-4 mt-2 me-2">اولیه</button>
<button type="button" class="btn bg-secondary bg-opacity-10 fw-semibold text-secondary py-2 px-4 mt-2 me-2">ثانوی</button>
<button type="button" class="btn bg-success bg-opacity-10 fw-semibold text-success py-2 px-4 mt-2 me-2">موفقیت</button>
<button type="button" class="btn bg-danger bg-opacity-10 fw-semibold text-danger py-2 px-4 mt-2 me-2">خطر</button>
<button type="button" class="btn bg-warning bg-opacity-10 fw-semibold text-warning py-2 px-4 mt-2 me-2">هشدار</button>
<button type="button" class="btn bg-info bg-opacity-10 fw-semibold text-info py-2 px-4 mt-2 me-2">اطلاعات</button>
<button type="button" class="btn bg-light bg-opacity-10 fw-semibold text-light py-2 px-4 mt-2 me-2">روشن</button>
<button type="button" class="btn bg-dark bg-opacity-10 fw-semibold text-dark py-2 px-4 mt-2 me-2">تاریک</button>
<button type="button" class="btn bg-link bg-opacity-10 fw-semibold text-link py-2 px-4 mt-2 me-2">لینک</button>

دکمه ها با نماد


<button type="button" class="btn btn-primary fw-semibold text-white py-2 px-4 mt-2 me-2"><i class="ri-add-line"></i> اولیه</button>
<button type="button" class="btn btn-secondary fw-semibold text-white py-2 px-4 mt-2 me-2"><i class="ri-add-line"></i> ثانوی</button>
<button type="button" class="btn btn-success fw-semibold text-white py-2 px-4 mt-2 me-2">موفقیت</button>
<button type="button" class="btn btn-danger fw-semibold text-white py-2 px-4 mt-2 me-2"><i class="ri-add-line"></i> خطر</button>
<button type="button" class="btn btn-warning fw-semibold text-white py-2 px-4 mt-2 me-2"><i class="ri-add-line"></i> هشدار</button>
<button type="button" class="btn btn-info fw-semibold text-white py-2 px-4 mt-2 me-2"><i class="ri-add-line"></i> اطلاعات</button>
<button type="button" class="btn btn-light fw-semibold text-white py-2 px-4 mt-2 me-2"><i class="ri-add-line"></i> روشن</button>
<button type="button" class="btn btn-dark fw-semibold text-white py-2 px-4 mt-2 me-2"><i class="ri-add-line"></i> تاریک</button>
<button type="button" class="btn btn-link fw-semibold text-white py-2 px-4 mt-2 me-2"><i class="ri-add-line"></i> لینک</button>

دکمه های گرد


<button type="button" class="btn btn-primary fw-semibold text-white py-2 px-4 mt-2 me-2 rounded-pill">اولیه</button>
<button type="button" class="btn btn-secondary fw-semibold text-white py-2 px-4 mt-2 me-2 rounded-pill">ثانوی</button>
<button type="button" class="btn btn-success fw-semibold text-white py-2 px-4 mt-2 me-2 rounded-pill">موفقیت</button>
<button type="button" class="btn btn-danger fw-semibold text-white py-2 px-4 mt-2 me-2 rounded-pill">خطر</button>
<button type="button" class="btn btn-warning fw-semibold text-white py-2 px-4 mt-2 me-2 rounded-pill">هشدار</button>
<button type="button" class="btn btn-info fw-semibold text-white py-2 px-4 mt-2 me-2 rounded-pill">اطلاعات</button>
<button type="button" class="btn btn-light fw-semibold text-white py-2 px-4 mt-2 me-2 rounded-pill">روشن</button>
<button type="button" class="btn btn-dark fw-semibold text-white py-2 px-4 mt-2 me-2 rounded-pill">تاریک</button>
<button type="button" class="btn btn-link fw-semibold text-white py-2 px-4 mt-2 me-2 rounded-pill">لینک</button>

طرح کلی دکمه های گرد


<button type="button" class="btn btn-outline-primary fw-semibold py-2 px-4 mt-2 me-2 hover-white rounded-pill">اولیه</button>
<button type="button" class="btn btn-outline-secondary fw-semibold py-2 px-4 mt-2 me-2 hover-white rounded-pill">ثانوی</button>
<button type="button" class="btn btn-outline-success fw-semibold py-2 px-4 mt-2 me-2 hover-white rounded-pill">موفقیت</button>
<button type="button" class="btn btn-outline-danger fw-semibold py-2 px-4 mt-2 me-2 hover-white rounded-pill">خطر</button>
<button type="button" class="btn btn-outline-warning fw-semibold py-2 px-4 mt-2 me-2 hover-white rounded-pill">هشدار</button>
<button type="button" class="btn btn-outline-info fw-semibold py-2 px-4 mt-2 me-2 hover-white rounded-pill">اطلاعات</button>
<button type="button" class="btn btn-outline-light fw-semibold py-2 px-4 mt-2 me-2 hover-white rounded-pill">روشن</button>
<button type="button" class="btn btn-outline-dark fw-semibold py-2 px-4 mt-2 me-2 hover-white rounded-pill">تاریک</button>

دکمه های بلوک


<button type="button" class="btn btn-primary fw-semibold text-white py-3 px-4 mt-2 w-100">دکمه بلوک</button>
<button type="button" class="btn bg-primary bg-opacity-50 fw-semibold text-white py-3 px-4 mt-2 w-100">دکمه بلوک</button>