Let’s dive into one of the most important UI/UX components: Designing Buttons & CTAs (Calls to Action). They drive user interaction — whether it’s signing up, buying, submitting, or navigating.
What Is a Button in UI/UX?
A button is a clickable interface element that triggers an action. A CTA (Call to Action) is a type of button or element designed to persuade users to take a specific action — like “Buy Now”, “Sign Up”, or “Get Started”.
Button Design Basics
Element
Role
Label/Text
Clearly tells the user what will happen
Shape
Rounded or rectangular to feel tappable/clickable
Size
Must be easily clickable (min. 44–48px height)
Color
Should stand out from the rest of the UI
Icon
Optional; helps reinforce action (e.g., ➕, 🔒)
Hover/Active
Indicates interactivity with visual feedback
Types of Buttons
Type
When to Use
Primary Button
Main action on a screen (e.g., “Submit”)
Secondary Button
Alternative action (e.g., “Cancel”)
Tertiary Button
Low-priority, usually text-only
Destructive Button
Triggers a negative action (e.g., “Delete”)
Ghost Button
Transparent or outlined (less emphasis)
Tip: There should only be one primary button per screen for clarity.
Button Sizes & Spacing
Element
Best Practice
Height
44–48px minimum (touch-friendly)
Width
At least as wide as label + padding
Padding
12–16px left/right, 8–12px top/bottom
Font Size
14–16px for body buttons, 18–24px for hero CTAs
Icon Padding
8px gap between icon and label
Button Colors & Contrast
Primary buttons should stand out (e.g., bright blue, green)
Use contrast: text should have WCAG AA contrast ratio (4.5:1 for body text)
Color-coding:
✅ Green = positive (submit, approve)
❌ Red = negative (delete, remove)
🔵 Blue = neutral or primary action
Button States (Feedback)
State
Purpose
Default
Normal appearance
Hover
Indicates clickable (slight color/lift)
Pressed
Clicked/tapped state
Disabled
Unavailable, usually greyed out
Loading
Shows ongoing action (e.g., spinner)
Writing Effective CTA Text
Good CTA copy is clear, action-oriented, and user-focused.
Bad
Better
Click here
Get Your Free Trial
Submit
Create Account
Buy
Buy Now – 30% Off!
Use verbs Be specific Focus on benefits, not actions
CTA Placement Tips
Place above the fold (early on the screen)
Repeat CTA after long sections or at key moments
On mobile: use sticky CTAs at the bottom
UX Tips for Buttons & CTAs
Only 1 clear primary action per view
Keep button labels short and specific
Use feedback (color, animation, state change) for clarity
On forms, disable buttons until required fields are filled
Group buttons logically (e.g., Save left, Cancel right)
Button Design in Figma
Use Auto Layout for responsive padding
Create a button component with variants:
Default, Hover, Pressed, Disabled
Add text styles and consistent spacing (8pt/4pt grid)
Test in both light and dark mode
Example Buttons
Use Case
Label
Style
Form submission
Submit Form
Primary
Navigation
Back to Home
Secondary
Ecommerce
Add to Cart
Primary + Icon
Exit/Dismiss
Cancel
Ghost/Tertiary
Destructive Action
Delete Account
Red, Destructive
Summary
Element
Importance
CTA Text
Must be clear and actionable
Color
Drives attention and communicates priority
Size & Spacing
Impacts usability and readability
Button States
Improves feedback and clarity
Placement
Impacts conversion and visibility
NEXT LESSON – Navigation Patterns & Best Practices
