7 Tailwind CSS Buttons
Buttons. Ahhh boring buttons. The most basic element we love to neglect. But buttons don't have to be boring. Here are 7 spicy button designs using Tailwind CSS.
Adding an icon to a button is a nice cherry on top for it's design and can add some context for it's intended action.
<button class="px-6 py-2.5 text-black rounded-lg bg-green-300 hover:bg-green-400 inline-flex items-center" type="button"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2" ...> <path ... /> </svg> Send email </button>
Standard button to draw a users attention to an action. Great for primary actions.
<button class="px-6 py-2.5 text-white bg-blue-500 rounded-lg hover:bg-blue-600 mt-2" type="button"> Standard </button>
Draws attention but not to much. Great for secondary actions.
<button class="px-6 py-2.5 text-blue-500 border-2 border-blue-500 bg-white rounded-lg hover:bg-blue-500 hover:text-white mt-2" type="button"> Outlined </button>
4) Dark & Square
Square buttons should only be used if the rest of your design is lacking border radiuses. Usually meant for a more business like theme.
<button class="px-6 py-2.5 text-white bg-gray-900 hover:bg-black" type="button"> Dark & Square </button>
5) Fully Rounded
A fully rounded button is meant for more light hearted designs. Again, if your using rounded buttons, keep the rest of your design consistant with it.
<button class="px-6 py-2.5 text-white rounded-full bg-pink-500 hover:bg-pink-600" type="button"> Fully Rounded </button>
Raised buttons give depth to the page and make the element appear closer to the user, giving it a sense of purpose.
<button class="px-8 py-3 shadow-2xl text-yellow-500 rounded bg-white hover:bg-gray-50 mt-2" type="button"> Raised </button>
Smooth buttons are great for secondary actions. Their designs don't draw as much attention as a solid primary button.
<button class="px-8 py-3 text-red-500 rounded bg-red-100 mt-2" type="button"> Smooth </button>
Beautiful Tailwind CSS Landing Pages
If you enjoyed this, consider checking out my new project - Tailwind Sites
There you will find Expertly crafted Tailwind CSS landing pages. Get a head start on your next big idea. Beautifully designed. Expertly coded. Unlimited access for just $99.