Let's get down to business, today I'll show you some easy steps for creating clean, functional buttons with Tailwind CSS.
1. HTML markup
First, we need some basic HTML markup, all styling will happen through Tailwind classes.
<a href="#" class="...">
Button
</a>
2. Display and spacing
Now on to adding classes to the class attribute. On mobile our button will be full-width otherwise, it will have some sane spacing defaults. The content is centered vertically as well as horizontally.
flex sm:inline-flex justify-center items-center px-5 py-2
3. Color
Next, we are adding background and text colors.
bg-blue-500 text-white
4. Text
Some simple text styling.
font-semibold text-center
5. Decoration
We are adding rounded borders and removing the default outline for a more polished look.
rounded-md outline-none
6. States
Don't forget to add states. Hover, active plus focus. These are important to give the user proper feedback.
hover:bg-blue-600 active:bg-blue-700 focus-visible:ring ring-blue-300
7. Transition
Finally adding a transition between the different states. Faster transition times usually work better for buttons (50ms to 150ms).
transition duration-100
Final result
<div class="bg-gray-100 py-16">
<div class="flex flex-wrap justify-center gap-4 p-4">
<a href="#" class="flex sm:inline-flex justify-center items-center bg-gradient-to-tr from-indigo-500 to-purple-400 hover:from-indigo-600 hover:to-purple-500 active:from-indigo-700 active:to-purple-600 focus-visible:ring ring-indigo-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
Button 1
</a>
<a href="#" class="flex sm:inline-flex justify-center items-center bg-gradient-to-tr from-pink-500 to-red-400 hover:from-pink-600 hover:to-red-500 active:from-pink-700 active:to-red-600 focus-visible:ring ring-pink-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
Button 2
</a>
<a href="#" class="flex sm:inline-flex justify-center items-center bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus-visible:ring ring-blue-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
Button 3
</a>
<a href="#" class="flex sm:inline-flex justify-center items-center bg-green-500 hover:bg-green-600 active:bg-green-700 focus-visible:ring ring-green-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
Button 4
</a>
</div>
</div>
More
👉 If you want to see more Tailwind CSS components and examples head over to Flowrift. It's a library full of beautifully designed Tailwind CSS UI blocks.
Top comments (0)