Button Showcase
Explore our beautifully crafted buttons with stunning visuals
Professional Style
Elevate your brand with our premium button collection
Tech Innovation
Modern buttons for cutting-edge applications
Creative Designs
Playful buttons that spark imagination
Button Variants
Discover different button styles for every use case
Primary Action
Secondary Option
Subtle Action
Large Button
Perfect for hero sections and main CTAs
Icon Button
Combine text with visual cues for better UX
Button States
Interactive states that provide clear visual feedback
Default States
Normal
Hover
Active
Focus States
Focus Ring
Focus Visible
Custom Focus
Disabled States
Disabled
Loading
Processing
State Combinations
Scale transform
Shadow effect
Ring focus
Move transform
Code Examples
Copy-paste ready button components for your projects
Primary Button
<button class="bg-indigo-600 text-white px-4 py-2 rounded-md font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
Click me
</button>Gradient Button
<button class="bg-gradient-to-r from-purple-600 to-pink-600 text-white px-6 py-3 rounded-lg font-medium hover:from-purple-700 hover:to-pink-700 transform hover:scale-105 transition-all duration-200">
Get Started
</button>Button Groups
<div class="inline-flex rounded-md shadow-sm" role="group">
<button class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100">
Previous
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100">
1
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100">
Next
</button>
</div>