Creating a Basic Button
Start with a simple button using padding, background color, and text styling. Tailwind makes it easy to build buttons quickly with utility classes.
Example:
<button class=”bg-blue-500 text-white px-4 py-2 rounded”>
Click Me
</button>
Adding Hover & Focus Effects
Enhance user interaction by adding hover and focus states. These improve UX by giving visual feedback when users interact with buttons.
Example:
<button class=”bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 focus:ring-2 focus:ring-green-300″>
Hover Me
</button>
Creating Different Button Variants
You can easily create multiple styles like primary, secondary, and outline buttons using different colors and borders.
Example:
<button class=”bg-blue-500 text-white px-4 py-2 rounded”>Primary</button>
<button class=”bg-gray-500 text-white px-4 py-2 rounded”>Secondary</button>
<button class=”border border-blue-500 text-blue-500 px-4 py-2 rounded”>Outline</button>
Adjusting Size & Shape
Tailwind allows you to control button size and shape using padding and border-radius utilities.
Example:
<button class=”px-6 py-3 text-lg rounded-full bg-purple-500 text-white”>
Large Button
</button>
Adding Icons & Transitions
You can include icons and smooth transitions to make buttons more modern and attractive.
Example:
<button class=”flex items-center gap-2 bg-indigo-500 text-white px-4 py-2 rounded transition hover:bg-indigo-600″>
<span>🚀</span>
Get Started
</button>
