# Button Press Feedback Animations: Best Practices from the Skills Repository

> Master button press feedback animations with expert best practices. Achieve tactile, interruptible UI elements for an immediate and natural feel. Learn from the emilkowalski/skills repository.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: best-practices
- Published: 2026-08-03

---

**Apply a subtle `transform: scale(0.97)` on `:active` with a 100–160 ms ease-out transition to create tactile, interruptible button feedback that feels immediate and natural.**

Button press feedback animations are critical for responsive user interfaces, providing the tactile confirmation users expect from digital interactions. According to the `emilkowalski/skills` repository, which documents design engineering standards, effective button feedback relies on specific CSS techniques that prioritize perceived performance and physical realism. The guidelines in [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) emphasize that small, unseen animation details compound to create polished, professional interfaces.

## Core Principles for Button Press Feedback

### Scale Down on the Active State

The foundation of tactile feedback is a subtle scale reduction when the user presses down. The repository recommends applying `transform: scale(0.97)` on the `:active` pseudo-class to simulate the physical compression of a real button. As documented in [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md), this transform provides instant visual confirmation that the element has registered the press before the click event even fires.

### Optimize Timing with Short Ease-Out Curves

Duration and easing functions determine whether an animation feels snappy or sluggish. The Skills repository specifies a transition duration between **100–160 ms** with an `ease-out` timing function for button press feedback. Specifically, the source recommends `transition: transform 160ms ease-out` to ensure the animation completes quickly while maintaining a natural deceleration that mirrors physical objects.

### Avoid Zero-Scale Entrance Animations

Starting animations from `scale(0)` creates an unnatural "pop-in" effect that violates physical expectations. The design engineering guidelines explicitly warn against `scale(0)` transformations, advising developers to start animations at **≥ 0.9** instead. This approach avoids jarring visual disruptions and maintains spatial continuity within the interface.

### Ensure Interruptibility with CSS Transitions

Unlike keyframe animations that restart from zero when interrupted, CSS transitions can be retargeted mid-flight. The repository emphasizes that button press feedback animations must be interruptible because users may trigger interactions repeatedly or change their minds mid-press. Using CSS `transition` properties rather than `animation` keyframes ensures the feedback responds immediately to state changes without visual glitches.

### Soften State Changes with Subtle Blur

When buttons change visual states—such as swapping icons or shifting colors—abrupt pixel differences can appear harsh. The Skills repository recommends adding a brief `filter: blur(2px)` during state transitions to mask these differences. This technique, applied to button content during the transitioning phase, creates a smoother visual bridge between states.

## Practical Implementation

```css
/* Base button with optimized transition timing */
.button {
  transition: transform 150ms ease-out, filter 120ms ease;
}

/* Tactile press feedback */
.button:active {
  transform: scale(0.97);
}

/* Optional: Smooth state change masking */
.button-content.is-transitioning {
  filter: blur(2px);
  opacity: 0.9;
}

```

This implementation applies the **150 ms** duration within the recommended range, uses the **scale(0.97)** transform for tactile feedback, and includes the optional blur filter for smoother state changes. The `ease-out` timing ensures the animation feels responsive rather than heavy.

## Source Files and References

The button press feedback guidelines are distributed across several files in the repository:

- [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md): Contains the primary specifications for scale transforms, transition durations, and interruptibility requirements.
- [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md): Reinforces the principle of responding on pointer-down rather than pointer-up for immediate feedback.
- [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md): Provides concrete CSS implementation standards for active states and overlay transitions.
- [`README.md`](https://github.com/emilkowalski/skills/blob/main/README.md): Documents the overarching philosophy that unseen animation details compound to create polished interfaces.

## Summary

- Apply `transform: scale(0.97)` on `:active` to simulate physical button compression.
- Use **100–160 ms** `ease-out` transitions for natural, responsive feedback.
- Start animations at `scale(≥0.9)` to avoid jarring pop-in effects.
- Prefer CSS transitions over keyframe animations to ensure interruptibility.
- Add `filter: blur(2px)` during state changes to soften abrupt visual transitions.

## Frequently Asked Questions

### Why scale to 0.97 instead of a larger value like 0.9?

A **0.97** scale factor provides subtle but perceptible feedback without creating a "sinking" effect that distracts from the interaction. According to the source guidelines in [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md), this value strikes the balance between visibility and subtlety, confirming the press without compromising the button's legibility or causing layout shifts.

### Should I use CSS transitions or keyframe animations for button press feedback?

Use **CSS transitions** for button press feedback. As implemented in the Skills repository standards, transitions can be retargeted mid-flight if the user interrupts the interaction, whereas keyframe animations restart from the beginning when state changes occur mid-animation. This interruptibility is crucial for responsive interfaces where users may rapidly toggle buttons.

### How short is too short for button press animation duration?

Durations **below 100 ms** risk becoming imperceptible to users, failing to provide the intended tactile confirmation. The repository recommends a minimum of 100 ms and an optimal range of 100–160 ms. Going shorter than this threshold eliminates the psychological benefit of the animation while potentially causing accessibility issues for users who need more time to perceive state changes.

### When should I apply the blur filter technique to buttons?

Apply `filter: blur(2px)` when a button undergoes **visual state changes** during the press, such as icon swaps or color inversions. According to [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md), this technique masks pixel-level differences that occur when content changes abruptly, creating a smoother perceived transition. It is optional for simple scale feedback but essential when content transforms during the active state.