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-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-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-blue-400 border border-blue-400 hover:text-gray-900 hover:bg-blue-600 hover:ring-0 hover:border-blue-600 focus:bg-blue-600 focus:border-blue-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:bg-gray-200 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-blue-700 border border-blue-700 mr-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-blue-700 bg-transparent border border-blue-700 hover:text-gray-100 hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:text-gray-100 focus:bg-blue-800 focus:border-blue-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-blue-400 bg-transparent border border-blue-400 hover:text-gray-900 hover:bg-blue-400 hover:ring-0 hover:border-blue-400 focus:text-gray-900 focus:bg-blue-400 focus:border-blue-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>

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-blue-700 border border-blue-700 bg-gradient-to-b from-blue-600 to-blue-800 hover:bg-blue-800 hover:from-blue-800 hover:to-blue-600 focus:from-blue-800 focus:to-blue-600 hover:text-white hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-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:bg-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:bg-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:bg-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-blue-400 border border-blue-400 bg-gradient-to-b from-blue-300 to-blue-500 hover:bg-blue-500 hover:from-blue-500 hover:to-blue-300 focus:from-blue-500 focus:to-blue-300 hover:text-gray-900 hover:bg-blue-600 hover:ring-0 hover:border-blue-600 focus:bg-blue-600 focus:border-blue-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:bg-gray-200 hover:from-gray-300 hover:to-gray-100 focus:from-gray-300 focus:to-gray-100 hover:text-gray-900 hover:bg-gray-200 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:bg-gray-800 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>

Button styles and Icon

Tailpro button variant and style.

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-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline-block ltr:mr-1 rtl:ml-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 ml-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 rounded-full mb-3 leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-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="p-6 inline-block text-center rounded-full 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 items-center">
                      <!--icon-->
                      <span class="ltr:mr-3 rtl:ml-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="ltr:text-left rtl:text-right">
                        <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 items-center">
                      <!--icon-->
                      <span class="ltr:mr-3 rtl:ml-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="ltr:text-left rtl:text-right">
                        <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 px-4 inline-block text-center mb-3 rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-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-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-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-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">Large</button>

Button group

Tailpro button group.

                
                  <!-- button group -->
                  <div class="flex inline-flex" role="group">
                    <button type="button" class="ltr:rounded-l rtl:rounded-r py-3 px-5 inline-block text-center mb-3 leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0 -mr-0.5">Left</button>
                    <button type="button" class="py-3 px-5 inline-block text-center mb-3 leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">Middle</button>
                    <button type="button" class="ltr:rounded-r rtl:rounded-l py-3 px-5 inline-block text-center mb-3 leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0 -ml-0.5">Right</button>
                  </div>

                  <!-- outline button group -->
                  <div class="flex inline-flex" role="group">
                    <button type="button" class="ltr:rounded-l rtl:rounded-r py-3 px-5 inline-block text-center mb-3 leading-normal text-blue-700 bg-white border border-blue-700 hover:text-gray-100 hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:text-gray-100 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0 -mr-0.5">Left</button>
                    <button type="button" class="py-3 px-5 inline-block text-center mb-3 leading-normal text-blue-700 bg-white border border-blue-700 hover:text-gray-100 hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:text-gray-100 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">Middle</button>
                    <button type="button" class="ltr:rounded-r rtl:rounded-l py-3 px-5 inline-block text-center mb-3 leading-normal text-blue-700 bg-white border border-blue-700 hover:text-gray-100 hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:text-gray-100 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0 -ml-0.5">Right</button>
                  </div>

Button group vertical

Tailpro button group vertical style.

                
                  <!-- button group vertical -->
                  <div class="flex flex-col ltr:float-left rtl:float-right w-32 ltr:mr-4 rtl:ml-4" role="group">
                    <button type="button" class="rounded-t py-3 px-5 inline-block text-center leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none 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-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">Middle</button>
                    <button type="button" class="rounded-b py-3 px-5 inline-block text-center leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0 -mt-0.5">Right</button>
                  </div><div class="clear-both"></div>

                  <!-- outline button group vertical -->
                  <div class="flex flex-col ltr:float-left rtl:float-right w-32" role="group">
                    <button type="button" class="rounded-t py-3 px-5 inline-block text-center leading-normal text-blue-700 bg-white border border-blue-700 hover:text-gray-100 hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:text-gray-100 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0 -mb-0.5">Left</button>
                    <button type="button" class="py-3 px-5 inline-block text-center leading-normal text-blue-700 bg-white border border-blue-700 hover:text-gray-100 hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:text-gray-100 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">Middle</button>
                    <button type="button" class="rounded-b py-3 px-5 inline-block text-center leading-normal text-blue-700 bg-white border border-blue-700 hover:text-gray-100 hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:text-gray-100 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0 -mt-0.5">Right</button>
                  </div><div class="clear-both"></div>