# How to Implement Button Press Feedback with scale(0.97) on :active State

> Implement button press feedback with scale(0.97) on the :active state using a short transition. Provide immediate tactile feedback for a responsive UI.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: how-to-guide
- Published: 2026-08-04

---

**Apply `transform: scale(0.97)` to a button's `:active` state with a 100–160 ms transition to create immediate tactile feedback that signals the UI is responding to user input.**

The `emilkowalski/skills` repository establishes a definitive pattern for button press feedback using a subtle scale transform. This approach, documented across multiple skill files including the Design Engineering and Apple Design guidelines, ensures buttons feel responsive and "listening" without requiring JavaScript or complex keyframe animations.

## The Design Philosophy Behind Scale(0.97) Feedback

According to the source code in [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md), buttons must provide **instant visual confirmation** when pressed to communicate that the interface is actively processing the user's action. The guidelines at lines 199–211 define this as a fundamental interaction principle: a button should never feel static or unresponsive during pointer-down events.

The pattern relies on CSS transforms rather than layout-affecting properties like `width` or `height` changes. This ensures the feedback remains performant and does not trigger expensive reflow calculations during the animation.

## Implementing the :active Scale Transform

### Basic CSS Structure

The implementation requires only two CSS rules: a transition property on the base state and a transform on the `:active` pseudo-class.

```html
<button class="btn-primary">Press me</button>

```

```css
.btn-primary {
  background: #0066ff;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  border-radius: 4px;
  
  /* Smooth restoration when releasing */
  transition: transform 120ms ease-out;
}

.btn-primary:active {
  transform: scale(0.97);
}

```

The `:active` selector triggers specifically while the user holds the mouse button down (or maintains touch contact), ensuring the visual feedback coincides exactly with the press action.

### Transition Timing and Easing

The repository recommends a transition duration between **100–160 ms** (with 120 ms as the default) to balance responsiveness against jarring motion. As implemented in [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md), the easing function should typically be `ease-out` or `cubic-bezier` variants that decelerate toward the resting state, creating a natural physical sensation of compression.

## Why 0.97? Selecting the Optimal Scale Value

The specific value of `0.97` represents the default within an acceptable range of **0.95–0.98**, as noted in [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) at lines 13–15. This range provides several technical advantages:

- **Visual noticeability**: Large enough to be perceived as deliberate motion
- **Layout stability**: Small enough to avoid shifting surrounding elements or causing "jumpy" interface behavior
- **Tactile illusion**: Mimics the physical compression of real-world buttons without distortion

Values below 0.95 risk appearing broken or accidental, while values above 0.98 often fail to register as intentional feedback on high-density displays.

## Apple Design Guidelines and Pointer-Down Response

The pattern receives additional validation in [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) (lines 28–33), which reinforces the principle that buttons must **respond on pointer-down** rather than waiting for the click event to complete. This file echoes the same CSS implementation, emphasizing that delayed feedback creates perceived latency and reduces user confidence.

The guidelines explicitly reject approaches that delay visual feedback until the mouse-up event or the completion of an asynchronous action. The `transform: scale(0.97)` technique satisfies this requirement by leveraging browser-native `:active` state management, which fires immediately upon press initiation.

## Summary

- **Apply `transform: scale(0.97)`** to the `:active` state of buttons for consistent press feedback across your design system
- **Use transition durations of 100–160 ms** (120 ms recommended) with `ease-out` timing for natural motion
- **Acceptable scale range is 0.95–0.98**, with 0.97 serving as the default sweet spot for visibility without layout disruption
- **Reference [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md)** for the core implementation guidelines and [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) for interaction philosophy
- **No JavaScript required**: The technique relies entirely on CSS `:active` pseudo-classes and hardware-accelerated transforms

## Frequently Asked Questions

### What is the optimal transition duration for button press feedback?

The optimal duration ranges between **100–160 ms**, with 120 ms serving as the standard default according to [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md). Durations shorter than 100 ms may appear instantaneous or flicker, while durations exceeding 160 ms create a sluggish, unresponsive sensation that contradicts the goal of immediate feedback.

### Why use scale(0.97) instead of scale(0.9)?

The value **0.97** provides sufficient visual noticeability without triggering layout shifts or appearing as a bug. As documented in the source guidelines, the 0.95–0.98 range ensures the button remains visually anchored in its original position while clearly communicating the pressed state. A 0.9 scale (10% reduction) typically distorts text and icons excessively and may cause surrounding elements to reflow.

### Does this technique work on mobile touch devices?

Yes, the `:active` state and `transform` properties work consistently across modern mobile browsers including Safari on iOS and Chrome on Android. The hardware-accelerated `scale()` transform ensures 60fps performance even on lower-end devices. However, some mobile browsers require the `-webkit-tap-highlight-color` property to be set to `transparent` to prevent default blue overlays from competing with your custom feedback.

### Where are these button press guidelines documented in the repository?

The primary documentation resides in **[`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md)** at lines 199–211, which provides the core CSS snippet and design rationale. Complementary guidance appears in **[`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md)** (lines 28–33) regarding the pointer-down philosophy, while **[`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md)** (line 107) offers additional context for animation reviews.