دکمه ها

دکمه ساده

										
<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>

دکمه حاشیه دار

										
<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>

دکمه های روشن

										
<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 >
	 <button type="button" > <i
	  ></i> اصلی</button>
	 <button type="button"
	 >
	 ثانویه <i ></i></button>
 </div>
 <div >
	 <button type="button" > <i
	  ></i> اصلی</button>
	 <button type="button"
	 >
	 ثانویه <i ></i></button>
 </div>
 <div >
	 <button type="button" > <i
	  ></i> اصلی</button>
	 <button type="button"
	 >
	 ثانویه <i ></i></button>
 </div>
</div>

شعاع

										
<div >
 <div >
 <button type="button" > <i
  ></i> اصلی</button>
 <button type="button"
 >
  ثانویه <i ></i></button>
 </div>
 <div >
  <button type="button" > <i
  ></i> اصلی</button>
  <button type="button"
  >
  ثانویه <i ></i></button>
 </div>
 <div >
  <button type="button" > <i
  ></i> اصلی</button>
  <button type="button"
  >
  ثانویه <i ></i></button>
 </div>
 </div>

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

										
<div >
	 <div >
	 <button type="button"
	  ><i
	 ></i> فیسبوک </button>
	 <button type="button"
	 ><i
 	></i> توییتر </button>
	 </div>

	 <div >
	 <button type="button"
	 ><i
	  ></i> پینترست
	 </button>
	 <button type="button"
	 ><i
	 ></i> لینکدین </button>
	 </div>

	 <div >
	 <button type="button"
	 ><i
	  ></i> ردیت </button>
	 <button type="button"
	  ><i
	 ></i> توییتر </button>
	 </div>
 </div>

دکمه آیکن

	

	<div >
		 <button type="button" > <i
		 ></i></button>
		 <button type="button" ><i
		 ></i></button>
		 <button type="button" > <i
		 ></i></button>
		 <button type="button" ><i
		 ></i></button>
		 <button type="button" >
		 <i ></i></button>
		 <button type="button" ><i
		  ></i></button>
	</div>

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

	
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>
 <button type="button" ><i
 ></i></button>

دکمه های غیرفعال

دکمه های فعال

										
<div >
	 <div >
	 <button type="button" > <i
	  ></i> اصلی</button>
	 <button type="button"
	  >
	  ثانویه <i ></i></button>
	 </div>
	 <div >
	 <button type="button" > <i
	  ></i> اصلی</button>
	 <button type="button"
	  >
	  ثانویه <i ></i></button>
	 </div>
	 <div >
	 <button type="button" > <i
	  ></i> اصلی</button>
	 <button type="button"
	  >
	  ثانویه <i ></i></button>
	 </div>
 </div>

دکمه های بارگزاری

										
 <div >
 <div >
 <button type="button">
 <span role="status"
 aria-hidden="true"></span>
 بارگزاری...
 </button>
 <button type="button">
 صبور باشید... <span 
 role="status" aria-hidden="true"></span>
 </button>
 <button type="button">
 <span role="status"
 aria-hidden="true"></span>
 <span >بارگزاری...</span>
 </button>
 <button type="button">
 <span role="status"
 aria-hidden="true"></span>
 <span >بارگزاری...</span>
 </button>
 </div>
 <div >
 <button 
 type="button">
 <span role="status"
 aria-hidden="true"></span>
 بارگزاری...
 </button>
 <button 
 type="button">
 صبور باشید... <span 
 role="status" aria-hidden="true"></span>
 </button>
 <button type="button">
 <span role="status"
 aria-hidden="true"></span>
 <span >بارگزاری...</span>
 </button>
 <button type="button">
 <span role="status"
 aria-hidden="true"></span>
 <span >بارگزاری...</span>
 </button>
 </div>
 <div >
 <button 
 type="button">
 <span role="status"
 aria-hidden="true"></span>
 بارگزاری...
 </button>
 <button 
 type="button">
 صبور باشید... <span 
 role="status" aria-hidden="true"></span>
 </button>
 <button type="button">
 <span role="status"
 aria-hidden="true"></span>
 <span >بارگزاری...</span>
 </button>
 <button type="button">
 <span role="status"
 aria-hidden="true"></span>
 <span >بارگزاری...</span>
 </button>
 </div>
</div>

بلاک دکمه ها

										
<div >
 <div >
 <div >
 <button type="button">دکمه</button>
 <button 
 type="button">دکمه</button>
 </div>
 </div>

 <div >
 <div >
 <button 
 type="button">دکمه</button>
 <button 
 type="button">دکمه</button>
 </div>
 </div>

 <div >
 <div >
 <button 
 type="button">دکمه</button>
 <button 
 type="button">دکمه</button>
 </div>
 </div>
 </div>

دکمه با اندازه های مختلف

										
<h1 >Example heading <span >جدید</span></h1>
<h2 >Example heading <span >جدید</span></h2>
<h3 >Example heading <span >جدید</span></h3>
<h4 >Example heading <span >جدید</span></h4>
<h5 >Example heading <span >جدید</span></h5>
<h6 >Example heading <span >جدید</span></h6>

شعاع دکمه ها

										
<button type="button" >اصلی</button>
<button type="button" >ثانویه</button>
<button type="button" >خطرناک</button>
<button type="button" >اخطار</button>

گروهبندی دکمه ها

لینک فعال لینک لینک

										
<div >
 <div >
 <div >
  <a href="#" 
  aria-current="page">Active link</a>
  <a href="#" >لینک</a>
  <a href="#" >لینک</a>
 </div>
 </div>
 <div >
 <div >
  <a href="#" 
  aria-current="page">Active link</a>
  <a href="#" >لینک</a>
  <a href="#" >لینک</a>
 </div>
 </div>
 <div >
 <div >
  <a href="#" 
  aria-current="page">Active link</a>
  <a href="#" >لینک</a>
  <a href="#" >لینک</a>
 </div>
 </div>
</div>

اندازه ها

										
<div >
 <div >
 <div role="group"
		 aria-label="Large button group">
		 <button type="button"
		 >راست</button>
		 <button type="button"
		 >وسط</button>
		 <button type="button"
		 >چپ</button>
		 </div>
		 </div>

		 <div >
		 <div role="group" aria-label="Default button group">
		 <button type="button"
		 >راست</button>
		 <button type="button"
		 >وسط</button>
		 <button type="button"
		 >چپ</button>
		 </div>
		 </div>

		 <div >
		 <div role="group"
		 aria-label="Small button group">
		 <button type="button"
		 >راست</button>
		 <button type="button"
		 >وسط</button>
		 <button type="button"
		 >چپ</button>
	 </div>
	</div>
	</div>

تودرتو

										
<div >
 <div >
 <div role="group"
  aria-label="Button group with nested dropdown">
  <button type="button" >1</button>
  <button type="button" >2</button>

  <div role="group">
  <button type="button" 
   data-bs-toggle="dropdown" aria-expanded="false">
   دراپ داون
  </button>
  <ul >
   <li><a href="#">لینک دراپ داون</a>
   </li>
   <li><a href="#">لینک دراپ داون</a>
   </li>
  </ul>
  </div>
 </div>
 </div>

 <div >
 <div role="group"
  aria-label="Button group with nested dropdown">
  <button type="button" >1</button>
  <button type="button" >2</button>

  <div role="group">
  <button type="button"
   
   data-bs-toggle="dropdown" aria-expanded="false">
   دراپ داون
  </button>
  <ul >
   <li><a href="#">لینک دراپ داون</a>
   </li>
   <li><a href="#">لینک دراپ داون</a>
   </li>
  </ul>
  </div>
 </div>
 </div>

 <div >
 <div role="group"
  aria-label="Button group with nested dropdown">
  <button type="button" >1</button>
  <button type="button" >2</button>

  <div role="group">
  <button type="button"
   
   data-bs-toggle="dropdown" aria-expanded="false">
   دراپ داون
  </button>
  <ul >
   <li><a href="#">لینک دراپ داون</a>
   </li>
   <li><a href="#">لینک دراپ داون</a>
   </li>
  </ul>
  </div>
 </div>
 </div>
</div>

چکباکس رادیو

چکباکس 1 چکباکس 2 چکباکس 3

رادیو 1 رادیو 2 رادیو 3

											
<div >
	 <div >
	 <div role="group"
	  aria-label="Basic checkbox toggle button group">
	  <input type="checkbox" id="btncheck1">
	  <label for="btncheck1">چکباکس
	  1</label>
	  <input type="checkbox" id="btncheck2">
	  <label for="btncheck2">چکباکس
	  2</label>
	  <input type="checkbox" id="btncheck3">
	  <label for="btncheck3">چکباکس
	  3</label>
	 </div>
	 </div>

	 <div >
	 <div role="group"
	  aria-label="Basic radio toggle button group">
	  <input type="radio" name="btnradio" id="btnradio1"
	  checked>
	  <label for="btnradio1">رادیو
	  1</label>
	  <input type="radio" name="btnradio"
	  id="btnradio2">
	  <label for="btnradio2">رادیو
	  2</label>
	  <input type="radio" name="btnradio"
	  id="btnradio3">
	  <label for="btnradio3">رادیو
	  3</label>
	 </div>
	 </div>

	 <div >
	 <div role="toolbar"
	  aria-label="Toolbar with button groups">
	  <div role="group" aria-label="First group">
	  <button type="button" >1</button>
	  <button type="button" >2</button>
	  <button type="button" >3</button>
	  <button type="button" >4</button>
	  </div>
	  <div role="group" aria-label="Third group">
	  <button type="button" >8</button>
	  </div>
	 </div>
	 </div>
</div>

دکمه عمودی

رادیو 1 رادیو 2 رادیو 3

												
<div >
		 <div >
		 <div role="group"
		 aria-label="Vertical button group">
		 <button type="button" >دکمه</button>
		 <button type="button" >دکمه</button>
		 <button type="button" >دکمه</button>
		 </div>
		
		 <div role="group"
		 aria-label="Vertical button group">
		 <button type="button" >دکمه</button>
		 <button type="button" >دکمه</button>
		 <div role="group">
		 <button type="button" 
		  data-bs-toggle="dropdown" aria-expanded="false">
		  دراپ داون
		 </button>
		 <ul >
		  <li><a href="#">لینک دراپ داون</a></li>
		  <li><a href="#">لینک دراپ داون</a></li>
		 </ul>
		 </div>
		 </div>
		
		 <div role="group"
		 aria-label="Vertical radio toggle button group">
		 <input type="radio" name="vbtn-radio"
		 id="vbtn-radio1" checked>
		 <label for="vbtn-radio1">رادیو
		 1</label>
		 <input type="radio" name="vbtn-radio"
		 id="vbtn-radio2">
		 <label for="vbtn-radio2">رادیو
		 2</label>
		 <input type="radio" name="vbtn-radio"
		 id="vbtn-radio3">
		 <label for="vbtn-radio3">رادیو
		 3</label>
		 </div>
		
		 </div>
		 <div >
		 <div role="group"
		 aria-label="Vertical button group">
		 <button type="button"
		 >دکمه</button>
		 <button type="button"
		 >دکمه</button>
		 <button type="button"
		 >دکمه</button>
		 </div>
		
		 <div role="group"
		 aria-label="Vertical button group">
		 <button type="button"
		 >دکمه</button>
		 <button type="button"
		 >دکمه</button>
		 <div role="group">
		 <button type="button"
		  
		  data-bs-toggle="dropdown" aria-expanded="false">
		  دراپ داون
		 </button>
		 <ul >
		  <li><a href="#">لینک دراپ داون</a></li>
		  <li><a href="#">لینک دراپ داون</a></li>
		 </ul>
		 </div>
		 </div>
		 </div>
		 <div >
		 <div role="group"
		 aria-label="Vertical button group">
		 <button type="button"
		 >دکمه</button>
		 <button type="button"
		 >دکمه</button>
		 <button type="button"
		 >دکمه</button>
		 </div>
		
		 <div role="group"
		 aria-label="Vertical button group">
		 <button type="button"
		 >دکمه</button>
		 <button type="button"
		 >دکمه</button>
		 <div role="group">
		 <button type="button"
		  
		  data-bs-toggle="dropdown" aria-expanded="false">
		  دراپ داون
		 </button>
		 <ul >
		  <li><a href="#">لینک دراپ داون</a></li>
		  <li><a href="#">لینک دراپ داون</a></li>
		 </ul>
		 </div>
		 </div>
		 </div>
</div>

میانبر

سبد خرید

سبد خرید شما خالی است

کل 346800000

اعلان

اعلان ندارید

دکمه ها

دکمه ساده

دکمه حاشیه دار

دکمه های روشن

دکمه آیکن

شعاع

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

دکمه آیکن

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

دکمه های غیرفعال

دکمه های فعال

دکمه های بارگزاری

بلاک دکمه ها

دکمه با اندازه های مختلف

شعاع دکمه ها

گروهبندی دکمه ها

اندازه ها

تودرتو

چکباکس رادیو

دکمه عمودی