UI Generator

Button Parameters

Button Text

Background Color

Text Color

Border Radius (px)

Shadow

Hover Effect

Hover Background Color

Hover Text Color

Width (px)

Height (px)

Font Weight

Border Width (px)

Border Color

Text Transform

Transition Speed (s)

Focus Outline

Preview

Output format

Tailwind HTML

1<button class="w-[120px] h-[40px] bg-[#3B82F6] text-[#FFFFFF] rounded-[4px] font-medium shadow-[0_2px_4px_rgba(0,0,0,0.1)] border-0 transition-all duration-[300ms] hover:bg-[#2563EB] hover:text-[#FFFFFF] hover:[filter:brightness(110%)] focus:outline-[2px_solid_#60A5FA]">
2  Click me
3</button>