Custom Button-Making Tool!!

Button Controls

Basic Button Info

Button text Link URL Button class name Open link in new tab?

Button Shape, Size, and Spacing

Width Fixed width in px Padding top/bottom Padding left/right Gap between icon and text Border roundedness in px

Background

Button color 1 Button color 2 Background type Gradient direction

Border

Border color Border thickness in px Border type

Text

Font Text size in px Text color Text weight

Add text outline

Outline color Outline thickness in px

Icon or Small Image

Add icon/image

Icon/image URL Icon alt text Icon size in px Icon position

Hover Effects

Change opacity on hover Hover opacity Grow or shrink on hover Hover scale Lift upward on hover Lift amount in px Add glow on hover Glow color Change background on hover Hover background color Change border color on hover Hover border color Hover transition speed in seconds

Presets

Live Preview and Generated Code

Click Me

The preview updates automatically when you change controls. Use "Create Button Code" when you want fresh copyable blocks.

HTML

CSS

Full Mini Example