Buttons
Interactive button styles and variants. Use the demo below to customize and generate button code.
Interactive Demo
HTML
<button class="px-4 py-2 rounded-lg font-medium transition-colors px-4 py-2 text-base bg-blue-500 text-white hover:bg-blue-600">
Button
</button>Basic Button
HTML
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
Button
</button>Variants
Solid (Default)
HTML
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
Primary
</button>Outline
HTML
<button class="px-4 py-2 border-2 border-blue-500 text-blue-500 rounded-lg hover:bg-blue-50 transition-colors">
Outline
</button>Ghost
HTML
<button class="px-4 py-2 text-blue-500 rounded-lg hover:bg-blue-50 transition-colors">
Ghost
</button>Soft
HTML
<button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors">
Soft
</button>Sizes
HTML
<!-- Extra Small -->
<button class="px-2.5 py-1.5 text-xs bg-blue-500 text-white rounded-lg">
Extra Small
</button>
<!-- Small -->
<button class="px-3 py-2 text-sm bg-blue-500 text-white rounded-lg">
Small
</button>
<!-- Medium (Default) -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
Medium (Default)
</button>
<!-- Large -->
<button class="px-6 py-3 text-lg bg-blue-500 text-white rounded-lg">
Large
</button>
<!-- Extra Large -->
<button class="px-8 py-4 text-xl bg-blue-500 text-white rounded-lg">
Extra Large
</button>States
HTML
<!-- Disabled -->
<button disabled class="px-4 py-2 bg-blue-500 text-white rounded-lg opacity-50 cursor-not-allowed">
Disabled
</button>
<!-- Loading... -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg opacity-70 cursor-wait">
<span class="animate-spin inline-block mr-2">⟳</span>
Loading...
</button>
<!-- Full Width Button -->
<button class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg">
Full Width Button
</button>