Use Tailstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
<button type="button" class="bg-blue-500 hover:bg-blue-700 text-blue-100 py-2 px-3 rounded">Primary</button>
<button type="button" class="bg-gray-600 hover:bg-gray-700 text-white py-2 px-3 rounded">Secondary</button>
<button type="button" class="bg-green-600 hover:bg-green-700 text-green-100 py-2 px-3 rounded">Success</button>
<button type="button" class="bg-red-600 hover:bg-red-700 text-red-100 py-2 px-3 rounded">Danger</button>
<button type="button" class="bg-yellow-500 hover:bg-yellow-600 text-yellow-100 py-2 px-3 rounded">Warning</button>
<button type="button" class="bg-teal-500 hover:bg-teal-600 text-teal-100 py-2 px-3 rounded">Info</button>
<button type="button" class="bg-gray-200 hover:bg-gray-300 text-black py-2 px-3 rounded">Light</button>
<button type="button" class="bg-gray-800 hover:bg-gray-900 text-white py-2 px-3 rounded">Dark</button>
<button type="button" class="text-blue-600 hover:underline py-2 px-3 rounded">Link</button>The bg-blue-500 hover:bg-blue-700 text-blue-100 py-2 px-3 rounded inline-block cursor-pointer classes may be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).
When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.
<a class="bg-blue-500 hover:bg-blue-700 text-blue-100 py-2 px-3 rounded inline-block" href="#" role="button">Link</a>
<button class="bg-blue-500 hover:bg-blue-700 text-blue-100 py-2 px-3 rounded" type="submit">Button</button>
<input class="bg-blue-500 hover:bg-blue-700 text-blue-100 py-2 px-3 rounded cursor-pointer" type="button" value="Input">
<input class="bg-blue-500 hover:bg-blue-700 text-blue-100 py-2 px-3 rounded cursor-pointer" type="submit" value="Submit">
<input class="bg-blue-500 hover:bg-blue-700 text-blue-100 py-2 px-3 rounded cursor-pointer" type="reset" value="Reset">In need of a button, but not the hefty background colors they bring? Here are some example stylings to get you started.
<button type="button" class="border text-blue-500 border-blue-500 hover:bg-blue-500 hover:text-blue-100 py-2 px-3 rounded">Primary</button>
<button type="button" class="border text-gray-600 border-gray-600 hover:bg-gray-600 hover:text-white py-2 px-3 rounded">Secondary</button>
<button type="button" class="border text-green-600 border-green-600 hover:bg-green-600 hover:text-green-100 py-2 px-3 rounded">Success</button>
<button type="button" class="border text-red-600 border-red-600 hover:bg-red-600 hover:text-red-100 py-2 px-3 rounded">Danger</button>
<button type="button" class="border text-yellow-500 border-yellow-500 hover:bg-yellow-500 hover:text-yellow-100 py-2 px-3 rounded">Warning</button>
<button type="button" class="border text-teal-500 border-teal-500 hover:bg-teal-500 hover:text-teal-100 py-2 px-3 rounded">Info</button>
<button type="button" class="border text-gray-200 border-gray-200 hover:bg-gray-200 hover:text-black py-2 px-3 rounded">Light</button>
<button type="button" class="border text-gray-800 border-gray-800 hover:bg-gray-800 hover:text-white py-2 px-3 rounded">Dark</button>Fancy larger or smaller buttons? Try .text-2xl or .text-xs with padding bumped up or down. See Tailwind Font Size for additional sizes.
<button type="button" class="text-2xl py-2 px-4 bg-blue-500 hover:bg-blue-700 text-blue-100 rounded">Large button</button>
<button type="button" class="text-2xl py-2 px-4 bg-gray-600 hover:bg-gray-700 text-white rounded">Large button</button><button type="button" class="text-xs py-1 px-2 bg-blue-500 hover:bg-blue-700 text-blue-100 rounded">Small button</button>
<button type="button" class="text-xs py-1 px-2 bg-gray-600 hover:bg-gray-700 text-white rounded">Small button</button>Create block level buttons—those that span the full width of a parent—by adding the classes block w-full.
<button type="button" class="block w-full py-2 px-3 bg-blue-500 hover:bg-blue-700 text-blue-100 rounded">Block level button</button>
<button type="button" class="block w-full py-2 px-3 bg-gray-600 hover:bg-gray-700 text-white rounded">Block level button</button>