> For the complete documentation index, see [llms.txt](https://help.craftsmanplus.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.craftsmanplus.com/play/properties/interactions/press-effect.md).
# Press Effect
Learn how to use Press Effect to customize a layer’s pressed state with scale and color overlay settings for responsive, tactile interactions.
The **Press Effect** lets you customize how a layer looks **while it is being pressed** (mouse down or touch down). This helps make interactions feel more responsive, tactile, and polished.
By default, layers have **no press effect applied**. You can opt in and customize it per layer.
### What is a Press Effect?
A Press Effect controls a layer’s **down state:** the visual feedback users see **while they are pressing** a layer, before releasing it.
You can use Press Effect to:
* Slightly **scale** a layer up or down
* Apply a **color overlay**
* Adjust the **opacity** of that overlay
This is especially useful for buttons, cards, and tappable UI elements.
### When Should You Use Press Effect?
Press Effect is ideal for:
* Buttons and CTAs
* Tappable cards or list items
* Any interactive element where visual feedback improves clarity
A subtle scale change or light overlay often feels more natural than a static element.
### Where to Find Press Effect
1. Select a layer in the PLAY editor
2. Open the **Interactions** section
3. Click the **Press Effect Properties button**
### Press Effect Properties Popup
Clicking the **Press Effect** button opens the **Press Effect Properties** popup.\
When the popup is open, the selected layer will appear **as if it is currently pressed** in the viewport, updating live as you change values.
The panel includes:
* **Set Scale**
* **Color Overlay**
* **Color Opacity**
* **Reset to Default button**
{% hint style="info" %}
**Note:** By default, the Press Effect opacity is set to **0%**. If you change the color without increasing the opacity, the color overlay will not be visible on the layer.
{% endhint %}
### Previewing the Press Effect
* **While the Press Effect panel is open:**\
The effect is applied directly to the layer in the viewport so you can preview changes instantly.
* **When the panel is closed:**\
The preview is removed, and the layer returns to its normal state.
This allows you to fine-tune the pressed appearance without repeatedly clicking the layer.
***
### Scale
**Set Scale** controls how much the layer grows or shrinks while pressed. The scale transition is eased in and out automatically, creating a smooth and responsive pressed interaction.
* **Range:** 0% – 1000%
* **Default:** 100% (no size change)
#### Examples
* **95%** → Layer slightly shrinks when pressed
* **105%** → Layer slightly grows when pressed
* **50%** → Layer becomes much smaller when pressed
This is commonly used to create a subtle “press-in” feeling.
***
### Color Overlay
The **Color Overlay** lets you tint the active (visible) pixels of a layer while it is pressed.
#### Color
* Choose a color or enter a hex value
* **Default:** Black (#000000)
#### Opacity
* Controls how strong the color overlay appears
* **Range:** 0% – 100%
* **Default:** 0% (no visible overlay)
#### How it works
When pressed, the layer’s visible pixels are overlaid with the selected color at the specified opacity.
***
### Reset to Default
The **Reset to Default** button quickly removes all press effect customization.
When clicked, it resets:
* Scale to **100%**
* Color Overlay to **Black (#000000)**
* Opacity to **0%**
Use this if:
* You want to remove the press effect entirely
* You want to start over with a clean slate
* You’ve experimented and want to return to the default behavior
***
### Best Practices
* Keep scale changes subtle (typically between **90%–110%**)
* Use low opacity overlays for a polished look **<20%**
* Test the effect using the viewport & preview before finalizing
* **Remember: If opacity is 0%, the color overlay won’t be visible**
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://help.craftsmanplus.com/play/properties/interactions/press-effect.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
