Buttons

Primary Success Danger Warning Info Light Dark Primary

                
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0">Primary</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-green-700 border border-green-700 hover:text-white hover:bg-green-800 hover:ring-0 hover:border-green-800 focus:bg-green-800 focus:border-green-800 focus:outline-none focus:ring-0">Success</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-red-700 border border-red-700 hover:text-white hover:bg-red-800 hover:ring-0 hover:border-red-800 focus:bg-red-800 focus:border-red-800 focus:outline-none focus:ring-0">Danger</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-800 bg-yellow-300 border border-yellow-300 hover:text-gray-900 hover:bg-yellow-400 hover:ring-0 hover:border-yellow-400 focus:bg-yellow-400 focus:border-yellow-400 focus:outline-none focus:ring-0">Warning</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-800 bg-primary-400 border border-primary-400 hover:text-gray-900 hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-none focus:ring-0">Info</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-800 bg-gray-100 border border-gray-100 hover:text-gray-900 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0">Light</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-gray-900 border border-gray-900 hover:text-white hover:bg-black hover:ring-0 hover:border-black focus:bg-black focus:border-black focus:outline-none focus:ring-0">Dark</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 me-2 cursor-not-allowed opacity-70" disabled>Primary</button>
                
              

Primary Success Danger Warning Info Light Dark

                
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-primary-700 bg-transparent border border-primary-700 hover:text-gray-100 hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:text-gray-100 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0">Primary</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-green-700 bg-transparent border border-green-700 hover:text-white hover:bg-green-800 hover:ring-0 hover:border-green-800 focus:text-white focus:bg-green-800 focus:border-green-800 focus:outline-none focus:ring-0">Success</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 hover:ring-0 hover:border-red-800 focus:text-white focus:bg-red-800 focus:border-red-800 focus:outline-none focus:ring-0">Danger</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-yellow-400 bg-transparent border border-yellow-400 hover:text-gray-900 hover:bg-yellow-400 hover:ring-0 hover:border-yellow-400 focus:text-gray-900 focus:bg-yellow-400 focus:border-yellow-400 focus:outline-none focus:ring-0">Warning</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-primary-400 bg-transparent border border-primary-400 hover:text-gray-900 hover:bg-primary-400 hover:ring-0 hover:border-primary-400 focus:text-gray-900 focus:bg-primary-400 focus:border-primary-400 focus:outline-none focus:ring-0">Info</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-transparent border border-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:text-gray-900 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0">Light</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-900 bg-transparent border border-gray-900 hover:text-white hover:bg-black hover:ring-0 hover:border-black focus:text-white focus:bg-black focus:border-black focus:outline-none focus:ring-0">Dark</button>
                
              

Primary Success Danger Warning Info Light Dark

                
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 bg-gradient-to-b from-primary-600 to-primary-800 hover:bg-primary-800 hover:from-primary-800 hover:to-primary-600 focus:from-primary-800 focus:to-primary-600 hover:text-white hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0">Primary</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-green-700 border border-green-700 bg-gradient-to-b from-green-600 to-green-800 hover:from-green-800 hover:to-green-600 focus:from-green-800 focus:to-green-600 hover:text-white hover:bg-green-800 hover:ring-0 hover:border-green-800 focus:bg-green-800 focus:border-green-800 focus:outline-none focus:ring-0">Success</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-red-700 border border-red-700 bg-gradient-to-b from-red-600 to-red-800 hover:from-red-800 hover:to-red-600 focus:from-red-800 focus:to-red-600 hover:text-white hover:bg-red-800 hover:ring-0 hover:border-red-800 focus:bg-red-800 focus:border-red-800 focus:outline-none focus:ring-0">Danger</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-800 bg-yellow-300 border border-yellow-300  bg-gradient-to-b from-yellow-300 to-yellow-500 hover:from-yellow-500 hover:to-yellow-300 focus:from-yellow-500 focus:to-yellow-300 hover:text-gray-900 hover:bg-yellow-400 hover:ring-0 hover:border-yellow-400 focus:bg-yellow-400 focus:border-yellow-400 focus:outline-none focus:ring-0">Warning</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-800 bg-primary-400 border border-primary-400 bg-gradient-to-b from-primary-300 to-primary-500 hover:from-primary-500 hover:to-primary-300 focus:from-primary-500 focus:to-primary-300 hover:text-gray-900 hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-none focus:ring-0">Info</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-800 bg-gray-100 border border-gray-100 bg-gradient-to-b from-gray-100 to-gray-300 hover:from-gray-300 hover:to-gray-100 focus:from-gray-300 focus:to-gray-100 hover:text-gray-900 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0">Light</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-gray-800 border border-gray-800 bg-gradient-to-b from-gray-700 to-gray-900 hover:from-gray-900 hover:to-gray-700 focus:from-gray-900 focus:to-gray-700 hover:text-white hover:bg-gray-900 hover:ring-0 hover:border-gray-900 focus:bg-gray-900 focus:border-gray-900 focus:outline-none focus:ring-0">Dark</button>
                
              

Buy Now Play Now Download on the App Store Get it on Google Play

                
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline-block me-1" width="1.5rem" height="1.5rem" fill="currentColor" viewBox="0 0 512 512"><circle cx="176" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></circle><circle cx="400" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></circle><polyline points="48 80 112 80 160 352 416 352" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></polyline><path d="M160,288H409.44a8,8,0,0,0,7.85-6.43l28.8-144a8,8,0,0,0-7.85-9.57H128" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path></svg> Buy Now
                  </button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-800 bg-gray-200 border border-gray-200 hover:text-gray-900 hover:bg-gray-300 hover:ring-0 hover:border-gray-300 focus:bg-gray-300 focus:border-gray-300 focus:outline-none focus:ring-0">
                    Play Now <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" class="inline-block ms-1" fill="currentColor" viewBox="0 0 512 512"><path d="M238.23,342.43l89.09-74.13a16,16,0,0,0,0-24.6l-89.09-74.13A16,16,0,0,0,212,181.86V330.14A16,16,0,0,0,238.23,342.43Z"/><path d="M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"/></svg>
                  </button>

                  <button type="button" class="mjkldisyjal inline-block text-center ropjaksldnk mb-3 leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" class="inline-block" fill="currentColor" viewBox="0 0 512 512"><path d="M190.06,414,353.18,274.22a24,24,0,0,0,0-36.44L190.06,98c-15.57-13.34-39.62-2.28-39.62,18.22V395.82C150.44,416.32,174.49,427.38,190.06,414Z"/></svg>
                  </button>
                  <button type="button" class="mjkldisyjal inline-block text-center ropjaksldnk mb-3 leading-normal text-gray-800 bg-gray-200 border border-gray-200 hover:text-gray-900 hover:bg-gray-300 hover:ring-0 hover:border-gray-300 focus:bg-gray-300 focus:border-gray-300 focus:outline-none focus:ring-0">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" class="inline-block" fill="currentColor" viewBox="0 0 512 512"><path d="M190.06,414,353.18,274.22a24,24,0,0,0,0-36.44L190.06,98c-15.57-13.34-39.62-2.28-39.62,18.22V395.82C150.44,416.32,174.49,427.38,190.06,414Z"/></svg>
                  </button>

                  <!--App store button-->
                  <a class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-gray-900 border border-gray-900 hover:text-white hover:bg-black hover:ring-0 hover:border-black focus:bg-black focus:border-black focus:outline-none focus:ring-0" href="https://itunes.apple.com">
                    <span class="flex pdskdmsdnjw">
                      <!--icon-->
                      <span class="me-3">
                        <!-- <span class="fab fa-apple font-size-2"></span> -->
                         <svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M256,32C132.26,32,32,132.26,32,256S132.26,480,256,480,480,379.74,480,256,379.74,32,256,32ZM171,353.89a15.48,15.48,0,0,1-13.46,7.65,14.91,14.91,0,0,1-7.86-2.16,15.48,15.48,0,0,1-5.6-21.21l15.29-25.42a8.73,8.73,0,0,1,7.54-4.3h2.26c11.09,0,18.85,6.67,21.11,13.13Zm129.45-50L200.32,304H133.77a15.46,15.46,0,0,1-15.51-16.15c.32-8.4,7.65-14.76,16-14.76h48.24l57.19-97.35h0l-18.52-31.55C217,137,218.85,127.52,226,123a15.57,15.57,0,0,1,21.87,5.17l9.9,16.91h.11l9.91-16.91A15.58,15.58,0,0,1,289.6,123c7.11,4.52,8.94,14,4.74,21.22l-18.52,31.55-18,30.69-39.09,66.66v.11h57.61c7.22,0,16.27,3.88,19.93,10.12l.32.65c3.23,5.49,5.06,9.26,5.06,14.75A13.82,13.82,0,0,1,300.48,303.92Zm77.75.11H351.09v.11l19.82,33.71a15.8,15.8,0,0,1-5.17,21.53,15.53,15.53,0,0,1-8.08,2.27A15.71,15.71,0,0,1,344.2,354l-29.29-49.86-18.2-31L273.23,233a38.35,38.35,0,0,1-.65-38c4.64-8.19,8.19-10.34,8.19-10.34L333,273h44.91c8.4,0,15.61,6.46,16,14.75A15.65,15.65,0,0,1,378.23,304Z"/></svg>
                      </span>
                      <!--text-->
                      <span class="text-start">
                        <span class="block">Download on the</span>
                        <strong>App Store</strong>
                      </span><!--end text-->
                    </span>
                  </a>

                  <!--google play-->
                  <a class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-800 bg-gray-200 border border-gray-200 hover:text-gray-900 hover:bg-gray-300 hover:ring-0 hover:border-gray-300 focus:bg-gray-300 focus:border-gray-300 focus:outline-none focus:ring-0" href="https://play.google.com">
                    <span class="flex pdskdmsdnjw">
                      <!--icon-->
                      <span class="me-3">
                        <!-- <span class="fab fa-google-play font-size-2"></span> -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 512 512"><path d="M48,59.49v393a4.33,4.33,0,0,0,7.37,3.07L260,256,55.37,56.42A4.33,4.33,0,0,0,48,59.49Z"/><path d="M345.8,174,89.22,32.64l-.16-.09c-4.42-2.4-8.62,3.58-5,7.06L285.19,231.93Z"/><path d="M84.08,472.39c-3.64,3.48.56,9.46,5,7.06l.16-.09L345.8,338l-60.61-57.95Z"/><path d="M449.38,231l-71.65-39.46L310.36,256l67.37,64.43L449.38,281C468.87,270.23,468.87,241.77,449.38,231Z"/></svg>
                      </span>
                      <!--text-->
                      <span class="text-start">
                        <span class="block">Get it on</span>
                        <strong>Google Play</strong>
                      </span><!--end text-->
                    </span>
                  </a>
                  <!--end google play-->
                
              

Small Normal Large

                
                  <button type="button" class="text-sm py-2 pyaieolaksj inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0">Small</button>
                  <button type="button" class="py-3 px-5 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0">Normal</button>
                  <button type="button" class="text-2xl py-4 px-8 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0">Large</button>
                
              

                
                  <!-- button group -->
                  <div class="inline-flex" role="group">
                    <button type="button" class="rounded-s py-3 px-5 inline-block text-center mb-3 leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0 -me-0.5">Left</button>
                    <button type="button" class="py-3 px-5 inline-block text-center mb-3 leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0">Middle</button>
                    <button type="button" class="rounded-e py-3 px-5 inline-block text-center mb-3 leading-normal text-gray-100 bg-primary-700 border border-primary-700 hover:text-white hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0 -ms-0.5">Right</button>
                  </div>

                  <!-- outline button group -->
                  <div class="inline-flex" role="group">
                    <button type="button" class="rounded-s py-3 px-5 inline-block text-center mb-3 leading-normal text-primary-700 bg-white border border-primary-700 hover:text-gray-100 hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:text-gray-100 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0 -me-0.5">Left</button>
                    <button type="button" class="py-3 px-5 inline-block text-center mb-3 leading-normal text-primary-700 bg-white border border-primary-700 hover:text-gray-100 hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:text-gray-100 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0">Middle</button>
                    <button type="button" class="rounded-e py-3 px-5 inline-block text-center mb-3 leading-normal text-primary-700 bg-white border border-primary-700 hover:text-gray-100 hover:bg-primary-800 hover:ring-0 hover:border-primary-800 focus:text-gray-100 focus:bg-primary-800 focus:border-primary-800 focus:outline-none focus:ring-0 -ms-0.5">Right</button>
                  </div>