UI & interface design

Button States & Micro-Interactions Design Generator

A comprehensive prompt template for designing complete button state systems and engaging micro-interactions that enhance user experience through visual feedback and intuitive interactions. Ideal for UI/UX designers, interaction designers, and product teams creating polished, responsive interfaces.

4 blanks to fill in · Added December 2025 · button-design · micro-interactions · interaction-design · button-states · ui-animation

The prompt

4 blanks

You are an expert interaction designer specializing in creating intuitive button states and delightful micro-interactions that provide clear feedback, enhance usability, and create engaging user experiences.

Design a comprehensive button state system and micro-interaction framework for [PROJECT/APPLICATION NAME] targeting [PLATFORM: web, iOS, Android, desktop]. The button system should serve [USER PERSONA] and support [PRIMARY USE CASES/ACTIONS].

## Project Context:

**Application Overview:**
- Product type: [e.g., SaaS dashboard, e-commerce, mobile app, enterprise tool]
- Primary user actions: [e.g., form submissions, transactions, content creation]
- Interaction complexity: [simple clicks, multi-step processes, real-time updates]
- Brand personality: [professional, playful, minimalist, dynamic]

**Technical Environment:**
- Platform: [Web, iOS, Android, Cross-platform]
- Implementation: [CSS animations, JavaScript, React/Vue components, native animations]
- Performance constraints: [60fps requirement, low-end device support, accessibility needs]
- Animation preferences: [subtle, moderate, expressive]

## Button Types & Hierarchy:

Define button styles for:

**Primary Buttons:**
- Purpose: [Main CTAs like Submit, Purchase, Save, Create]
- Visual weight: Highest emphasis with solid fill
- Usage guideline: [One per screen/section, for primary action]

**Secondary Buttons:**
- Purpose: [Alternative actions like Cancel, Go Back, Learn More]
- Visual weight: Medium emphasis with outline or ghost style
- Usage guideline: [Supporting actions alongside primary]

**Tertiary/Text Buttons:**
- Purpose: [Low-priority actions like Skip, Dismiss, View Details]
- Visual weight: Minimal emphasis, text-only or subtle styling
- Usage guideline: [Optional or less critical actions]

**Icon Buttons:**
- Purpose: [Compact actions like Close, Menu, Share, Favorite]
- Visual weight: Varies by context
- Usage guideline: [Navigation, toolbars, inline actions]

**Additional Types:**
- Floating Action Button (FAB): [Mobile primary action]
- Toggle Buttons: [On/Off states, selection groups]
- Split Buttons: [Primary action with dropdown alternatives]

## Complete Button State System:

Design specifications for all essential states:

### 1. Default/Enabled State
**Visual Characteristics:**
- Color: [PRIMARY BRAND COLOR with sufficient contrast]
- Typography: [Font family, size, weight, letter-spacing]
- Padding: [Vertical and horizontal spacing, minimum 44x44px touch target]
- Border radius: [0px sharp, 4px slight, 8px rounded, full pill]
- Shadow/elevation: [None, subtle 2px, medium 4px]
- Cursor: pointer

**Design Principles:**
- Clearly indicates clickability through color and positioning
- Sufficient contrast ratio: 4.5:1 text-to-background minimum for WCAG AA
- Distinctive from surrounding elements
- Consistent with brand visual language

### 2. Hover State
**Visual Changes:**
- Color shift: [Lighten by 10%, darken by 15%, or specify hex]
- Background transformation: [Opacity change, gradient shift, color transition]
- Border modification: [Add outline, increase width, change color]
- Shadow enhancement: [Elevate from 2px to 4px, add glow effect]
- Scale transformation: [Scale(1.02) subtle grow effect]
- Cursor: pointer

**Transition Specifications:**
- Duration: [150ms-200ms for responsiveness without lag]
- Easing: [ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)]
- Properties: [background-color, box-shadow, transform]

**Design Principles:**
- Immediate feedback within 100ms of hover
- Subtle enough not to distract, clear enough to notice
- Consistent hover behavior across all button types

### 3. Focus State
**Visual Indicators:**
- Focus ring: [2-3px outline in contrasting color, 2px offset]
- Focus color: [Brand color, high-contrast blue, or accessible choice]
- Background change: [Optional subtle highlight]
- Combination: [Both outline and background for clarity]

**Accessibility Requirements:**
- Minimum 3:1 contrast ratio for focus indicator against background
- Visible on all interactive elements for keyboard navigation
- Never remove default focus without providing alternative
- Sufficient offset to prevent clipping by button edges

**Keyboard Behavior:**
- Focus via Tab key navigation
- Activate via Enter or Space key
- Clear focus order following logical reading flow

### 4. Active/Pressed State
**Visual Feedback:**
- Color: [Darker shade, 20-30% darker than default]
- Transform: [Scale(0.98) to simulate depression]
- Shadow: [Reduce or inset shadow for pressed effect]
- Position: [Translate(0, 1px) downward shift]

**Timing:**
- Instant response on mousedown/touchstart
- Duration: 50-100ms for tactile feel
- Return to hover state on mouseup within button
- Return to default if mouseup outside button

**Design Principles:**
- Mimics physical button pressing for familiarity
- Provides immediate tactile-like feedback
- Prevents accidental double-clicks through visual confirmation

### 5. Disabled State
**Visual Characteristics:**
- Color: [Gray scale, desaturated version of default]
- Opacity: [40-60% of enabled state]
- Cursor: not-allowed or default
- Text color: [Reduced contrast while maintaining readability]
- Remove shadows and interactive effects

**Behavior:**
- No hover, focus, or click responses
- Aria-disabled="true" for screen readers
- Tooltip explanation when disabled (optional)

**Usage Guidelines:**
- Use when action is temporarily unavailable
- Provide context for why button is disabled when possible
- Re-enable dynamically when conditions are met
- Avoid hiding buttons; show disabled state for awareness

### 6. Loading State
**Visual Elements:**
- Loading indicator: [Spinner, progress bar, skeleton, animated dots]
- Button text: [Replace with "Loading..." or keep original with spinner]
- Width: [Maintain original width to prevent layout shift]
- Disabled interactions during load
- Cursor: wait or progress

**Animation Specifications:**
- Spinner: [Size 16-20px, 1-2s rotation duration, infinite loop]
- Position: [Replace text, inline before/after text, overlay]
- Color: [Contrast with button background, typically white or brand]

**Design Principles:**
- Prevent multiple submissions through disabled state
- Provide immediate feedback that action is processing
- Loading duration visibility: instant for <500ms, show for longer
- Maintain button dimensions to prevent layout reflow

### 7. Success State (Optional)
**Visual Confirmation:**
- Icon: [Checkmark, animated success icon]
- Color transition: [Change to success green]
- Animation: [Checkmark draw-in, scale pulse]
- Duration: [1-2 seconds before returning or navigating]

**Use Cases:**
- Form submissions
- Payment confirmations
- Save actions
- Item additions to cart/favorites

### 8. Error State (Optional)
**Visual Feedback:**
- Color: [Error red background or border]
- Icon: [Error icon, shake animation]
- Text: [Change to error message]
- Animation: [Horizontal shake, border pulse]

**Use Cases:**
- Failed submissions
- Validation errors
- Network failures
- Permission denials

## Micro-Interactions Framework:

Design purposeful micro-interactions for:

**Button Hover Effects:**
- Subtle scale or lift animations
- Color transitions and gradient shifts
- Icon animations (arrows sliding, icons rotating)
- Underline or border animations

**Click Feedback:**
- Ripple effect from click point
- Scale down then up (press effect)
- Color pulse or flash
- Particle effects for celebratory actions

**State Transitions:**
- Smooth morphing between states
- Loading to success animations
- Error shake with recovery
- Disabled to enabled fade-in

**Contextual Micro-Interactions:**
- Icon changes on hover (arrow to checkmark)
- Badge count updates with bounce
- Tooltip appearances on focus
- Progress indicators for multi-step actions

## Animation Specifications:

**Timing Guidelines:**
- Immediate feedback: 0-100ms (hover, focus detection)
- Quick transitions: 100-300ms (state changes, color shifts)
- Moderate animations: 300-500ms (loading indicators, success confirmations)
- Extended animations: 500-1000ms (complex multi-step feedback)

**Easing Functions:**
- Linear: Progress bars, loading spinners
- Ease-in-out: Most button state transitions
- Ease-out: Entrance animations, expanding elements
- Ease-in: Exit animations, collapsing elements
- Custom cubic-bezier: [Specify for brand-specific motion]

**Performance Considerations:**
- Use transform and opacity for 60fps performance
- Avoid animating width, height, left, right, top, bottom
- Use will-change sparingly for complex animations
- Provide reduced-motion alternative for accessibility
- Test on low-end devices for smooth performance

## Accessibility Requirements:

- Keyboard navigation with visible focus indicators
- ARIA labels for icon-only buttons
- aria-disabled, aria-pressed, aria-expanded states
- Minimum 44x44px touch targets for mobile
- Support for prefers-reduced-motion media query
- Screen reader announcements for state changes
- Sufficient color contrast in all states (WCAG AA minimum)
- No reliance on color alone to convey state

## Deliverables:

1. **Button State Design System:**
   - Visual designs for all 8 button states across all button types
   - Side-by-side comparison showing state transitions
   - Organized in [Figma/Sketch/Adobe XD] with component variants
   - Responsive behavior for mobile, tablet, desktop

2. **Micro-Interaction Library:**
   - Animated prototypes demonstrating each interaction
   - Timing and easing specifications document
   - Animation flows showing transition sequences
   - Video or GIF exports for developer reference

3. **Technical Specifications:**
   - CSS code snippets for each state
   - Animation keyframes and transitions
   - JavaScript interaction logic (if needed)
   - Framework-specific components [React, Vue, Angular]

4. **Implementation Guide:**
   - Code examples with inline comments
   - Accessibility implementation checklist
   - Performance optimization recommendations
   - Browser compatibility notes
   - Testing scenarios for QA

5. **Design Documentation:**
   - When to use each button type
   - State transition diagrams
   - Do's and don'ts with visual examples
   - Accessibility guidelines and WCAG compliance notes
   - Motion design principles and brand motion language

Ensure all button states and micro-interactions achieve:
- 100-150ms response time for immediate feedback
- 60fps smooth animations without jank
- WCAG 2.2 AA compliance minimum
- Consistent behavior across all platforms
- Purposeful design that enhances rather than decorates

Open in ChatGPT

Blanks: Project/application name · Platform · User persona · Primary use cases/actions

How to use it

Use this prompt to create a complete button state system and micro-interaction framework tailored to your product's needs. Replace bracketed placeholders with specific project details including platform, brand personality, technical stack, and interaction preferences. The output will provide comprehensive designs, specifications, and implementation guidelines covering all button states from default to loading, plus engaging micro-interactions that provide intuitive feedback. For optimal results, provide examples of button interactions you admire or specify animation intensity preferences.

Tips

Design all button states upfront in a single component or artboard showing side-by-side comparisons. This ensures visual consistency and helps you spot issues like insufficient contrast in disabled states or confusing similarity between hover and active states.
Use the 100-300-500 timing rule: feedback under 100ms feels instant, transitions between 100-300ms feel responsive, and animations from 300-500ms feel smooth. Anything slower than 500ms should be reserved for loading states or intentional dramatic effects.
Test button interactions on actual devices, not just emulators. Hover states that work beautifully on desktop may cause confusion on touch devices where hover is sticky or non-existent, requiring separate touch-specific feedback mechanisms.
Implement loading states that prevent double-submission by disabling the button immediately on click, before any network requests complete. This single pattern prevents countless duplicate transactions, form submissions, and API calls.
Design focus indicators that match your brand while maintaining WCAG compliance. The default blue outline works but lacks personality—create custom focus rings using your brand colors at sufficient contrast for a polished, accessible experience.
Use purposeful micro-interactions sparingly and strategically. Animate primary CTAs more expressively than secondary buttons, add success celebrations only for significant completions like purchases or account creation, and keep everyday actions subtle to avoid fatigue from excessive motion.

Understanding Button State Importance

Button states are fundamental to user experience because they provide continuous feedback about interface status and available actions. Each state communicates specific information: default states show availability, hover states indicate interactivity, focus states support keyboard navigation, active states confirm user input, disabled states prevent errors, and loading states manage expectations during processing. Research shows that proper button feedback increases conversion rates by up to 200% and reduces user confusion significantly. Before designing, audit your application to identify all button contexts—forms, navigation, e-commerce transactions, content actions, and settings. Consider user emotional states at each interaction point: anxious users completing payments need reassuring loading feedback, while power users navigating dashboards need fast, subtle responses. Map your button types to a clear hierarchy ensuring users can instantly distinguish primary actions from secondary options through visual weight and positioning.

Designing State Transitions

Effective state transitions balance immediacy with smoothness, providing instant feedback without jarring users. Hover states should respond within 100ms—any longer feels laggy and breaks the connection between mouse movement and visual response. Active/pressed states need instant response on mousedown or touchstart to create tactile feedback that mimics physical buttons. Loading states should appear immediately for processes exceeding 500ms but remain hidden for faster operations to avoid flicker. Use consistent timing across similar interactions: all primary buttons should have identical hover durations, all loading states should use the same spinner style. Design transition animations that feel natural by using appropriate easing functions—ease-in-out works for most state changes, ease-out for growing or appearing elements, and ease-in for shrinking or disappearing elements. Test animations at actual speed in your design tool or browser rather than relying on slow-motion previews, as timing that feels right at 50% speed often feels sluggish at full speed. Consider the emotional tone of each interaction: playful brands might use bouncy cubic-bezier curves while professional applications need more restrained linear or ease-in-out timing.

Micro-Interaction Principles

Great micro-interactions are purposeful, subtle, and enhance functionality without calling attention to themselves. Every micro-interaction should serve a clear purpose—confirming actions, revealing system status, providing error prevention, or creating delightful moments at appropriate times. Follow the principle of progressive disclosure: show only necessary feedback at each stage rather than overwhelming users with every detail. Implement feedback loops that complete the interaction cycle: user acts, system acknowledges, system processes, system confirms completion. Design for edge cases including success, failure, slow connections, and interruptions. Ripple effects on click points help users understand where they touched, especially on large buttons or touch interfaces. Icon animations like arrows sliding or checkmarks drawing in add polish while reinforcing action meaning. However, avoid animation overload—too many simultaneous micro-interactions create chaos and diminish their effectiveness. Respect user preferences by implementing prefers-reduced-motion media queries that disable non-essential animations for users sensitive to motion or using assistive technologies.

Implementation Best Practices

Implement button states using CSS pseudo-classes (:hover, :focus, :active, :disabled) for maintainability and performance. Use CSS transitions for simple property changes and CSS animations or JavaScript for complex sequences. Optimize for 60fps by animating only transform and opacity properties, which can be GPU-accelerated, while avoiding width, height, top, left, right, bottom, and margin animations that trigger layout recalculations. Structure CSS with clear state specificity: define default styles first, then layer state modifications ensuring focus styles have sufficient specificity to override hover. For complex interactions, use JavaScript state management rather than purely CSS-based solutions to maintain synchronization between visual state and application state. Implement loading states by disabling the button immediately on click, showing loading indicators, and re-enabling only when server responses complete or errors occur. Test extensively across devices and input methods: mouse hover doesn't exist on touch devices, so ensure touch feedback through active states; keyboard navigation requires visible focus states; screen readers need ARIA attributes announcing state changes. Create reusable button components in your framework (React, Vue, Angular) that encapsulate all states, reducing inconsistencies and simplifying maintenance as your design system evolves.