Buttons

Use Tailpro custom button styles for actions in forms, dialogs, and more with multiple sizes, states, and more.

Examples

Tailpro includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

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

Outline buttons

Tailpro button with outline style.

                
                  <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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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-hidden 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-hidden focus:ring-0">Dark</button>
                
              

Gradient button

Tailpro button with background gradient style.

                
                  <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-linear-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-hidden 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-linear-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-hidden 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-linear-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-hidden 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-linear-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-hidden 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-linear-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-hidden 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-linear-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-hidden 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-linear-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-hidden focus:ring-0">Dark</button>
                
              

Button styles and Icon

Tailpro button variant and style.

                
                  <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-hidden 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-hidden 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="p-6 inline-block text-center boalstehwqbj 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-hidden 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="p-6 inline-block text-center boalstehwqbj 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-hidden 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-hidden focus:ring-0" href="https://itunes.apple.com">
                    <span class="flex layhetgsjdcb">
                      <!--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-hidden focus:ring-0" href="https://play.google.com">
                    <span class="flex layhetgsjdcb">
                      <!--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-->
                
              

Button size

Tailpro button size.

                
                  <button type="button" class="text-sm py-2 uajskeiolksb 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-hidden 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-hidden focus:ring-0">Normal</button>
                  <button type="button" class="text-2xl py-4 maksueyropls 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-hidden focus:ring-0">Large</button>
                
              

Button group

Tailpro button group.

                
                  <!-- button group -->
                  <div class="inline-flex" role="group">
                    <button type="button" class="rounded-s-sm 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-hidden 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-hidden focus:ring-0">Middle</button>
                    <button type="button" class="rounded-e-sm 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-hidden focus:ring-0 -ms-0.5">Right</button>
                  </div>

                  <!-- outline button group -->
                  <div class="inline-flex" role="group">
                    <button type="button" class="rounded-s-sm 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-hidden 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-hidden focus:ring-0">Middle</button>
                    <button type="button" class="rounded-e-sm 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-hidden focus:ring-0 -ms-0.5">Right</button>
                  </div>
                
              

Button group vertical

Tailpro button group vertical style.

                
                  <!-- button group vertical -->
                  <div class="flex ioajsklehsnm float-start w-32 me-4" role="group">
                    <button type="button" class="rounded-t-sm py-3 px-5 inline-block text-center 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-hidden focus:ring-0 -mb-0.5">Left</button>
                    <button type="button" class="py-3 px-5 inline-block text-center 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-hidden focus:ring-0">Middle</button>
                    <button type="button" class="rounded-b-sm py-3 px-5 inline-block text-center 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-hidden focus:ring-0 -mt-0.5">Right</button>
                  </div><div class="clear-both"></div>

                  <!-- outline button group vertical -->
                  <div class="flex ioajsklehsnm float-start w-32" role="group">
                    <button type="button" class="rounded-t-sm py-3 px-5 inline-block text-center 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-hidden focus:ring-0 -mb-0.5">Left</button>
                    <button type="button" class="py-3 px-5 inline-block text-center 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-hidden focus:ring-0">Middle</button>
                    <button type="button" class="rounded-b-sm py-3 px-5 inline-block text-center 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-hidden focus:ring-0 -mt-0.5">Right</button>
                  </div><div class="clear-both"></div>