Button Builder – Basic 11
1. Text
Button Text
Font Family
System
Arial
Courier
Comic
Orbitron
Schoolbell
Sniglet
Mystery
Press Start
Happy Monkey
Yatra One
Smokum
These fonts are also added to your HTML as <link> tags.
Font Size (px)
Font Weight
default
100 – Thin
200 – Extra Light
300 – Light
400 – Normal
500 – Medium
600 – Semi-bold
700 – Bold
800 – Extra Bold
900 – Black
2. Colors
Text Color (RGBA)
default
black
white
red
blue
green
yellow
Picker (with eyedropper)
Opacity
RGBA value
Background Color (RGBA)
default
black
white
red
blue
green
yellow
Picker (with eyedropper)
Opacity
RGBA value
3. Size
Width (px)
Height (px)
4. Border
Border: none
When ON, border is completely removed.
Border Style
(no change)
solid
dashed
dotted
Border Width (px)
Border Color
default
black
white
red
blue
green
Border Radius (px)
5. Page Background Theme
Click a theme to change the page background.
6. Challenge Mode
Pick a real-world button to copy (no CSS is pre-filled).
Request now
Add to Cart
Sign up
Get started
Download
Apply
Save
SUBSCRIBE
JOIN
Tweet
Reset All
Preview
No challenge selected.
Target Button
Target
Your Button
Click Me!
Pick a challenge, style your button, then click “Check”.
Check My Button
HTML
Copy
CSS
Copy
This tool uses only the 11 core properties:
color, background-color, width, height,
border-style, border-width, border-color,
border-radius, font-family, font-size, font-weight.