<div >
 <div >
    <h5>Background colors</h5>
   </div>
   <div >
    <div >
    <button type="button" >پس زمینه اصلی</button>
    <button type="button" >پس زمینه ثانویه</button>
    <button type="button" >پس زمینه موفقیت</button>
    <button type="button" >پس زمینه خطرناک</button>
    <button type="button" >پس زمینه اخطار</button>
    <button type="button" >پس زمینه اطلاعات</button>
    <button type="button" >پس زمینه روشن</button>
    <button type="button" >پس زمینه تاریک</button>
    </div>
   </div>
</div>
                  

<div >
   <div >
   <h5>Background color shades</h5>
   </div>
   <div >
   <div >
    <button type="button" >پس زمینه اصلی-900</button>
    <button type="button" >پس زمینه اصلی-800</button>
    <button type="button" >پس زمینه اصلی-700</button>
    <button type="button" >پس زمینه اصلی-600</button>
    <button type="button" >پس زمینه اصلی-500</button>
    <button type="button" >پس زمینه اصلی-400</button>
    <button type="button" >پس زمینه اصلی-300</button>
   </div>
   </div>
 </div>

<div >
 <div >
   <h5> پس زمینه حاشیه دار</h5>
 </div>
 <div >
  <div >
   <button type="button" >پس زمینه حاشیه دار اصلی</button>
   <button type="button" >پس زمینه حاشیه دار ثانویه</button>
   <button type="button" >پس زمینه حاشیه دار موفق</button>
   <button type="button" >پس زمینه حاشیه دار خطرناک</button>
   <button type="button" >پس زمینه حاشیه دار اخطار</button>
   <button type="button" >پس زمینه حاشیه دار اطلاعات</button>
   <button type="button" >پس زمینه حاشیه دار روشن</button>
   <button type="button" >پس زمینه حاشیه دار تاریک</button>
  </div>
 </div>
</div>

<div >
   <div >
   <h5> پس زمینه ملایم</h5>
   </div>
   <div >
   <div >
    <button type="button" >پس زمینه ملایم اصلی</button>
    <button type="button" >پس زمینه ملایم ثانویه</button>
    <button type="button" >پس زمینه ملایم موفق</button>
    <button type="button" >پس زمینه ملایم خطرناک</button>
    <button type="button" >پس زمینه ملایم اخطار</button>
    <button type="button" >پس زمینه ملایم اطلاعات</button>
    <button type="button" >پس زمینه ملایم روشن</button>
    <button type="button" >پس زمینه ملایم تاریک</button>
    <button type="button" >پس زمینه ملایم لینک</button>
   </div>
   </div>
 </div>