Button Press on Click

This interaction adds a subtle press animation that makes buttons visually respond to clicks. When clicked, the button slightly scales down and then smoothly returns to its original size, creating a realistic “button press” effect.

How it works

Trigger: Mouse Down and Release - The animation plays when the user clicks (presses and releases) a button.

Actions: (Mouse Down Timeline)

    • Scale (0s): Scale X and Y down to 0.8    with a duration of 0.1s   .
    • Scale (0.1s): Scale X and Y up to 1.0    with a duration of 0.2s   .

How to Use

Select the button block to apply the interaction to, then import the interaction.

Interactions Used

There should be no selected block when importing this interaction to not override the targeting of all Core Button blocks. Currently, location rule is always the current post/page.

Code Block

Copy the whole markup below and paste it into a new post in your WordPress block editor.

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#0b0d4b"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#0b0d4b">Click</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Interaction Code

Copy the entire text below, and import it as a new interaction. See How to Import Interactions on how to do this.

{
    "active": true,
    "type": "click",
    "target": {
        "type": "block-name",
        "value": "core/button",
        "blockName": "core/button"
    },
    "timelines": [
        {
            "loop": false,
            "onceOnly": false,
            "alternate": false,
            "reset": false,
            "reverse": false,
            "actions": [
                {
                    "type": "scale",
                    "target": {
                        "type": "trigger",
                        "value": "",
                        "blockName": "",
                        "options": ""
                    },
                    "timing": {
                        "isStartingState": false,
                        "start": 0,
                        "duration": 0.1,
                        "easing": "outCirc",
                        "customEasing": ""
                    },
                    "value": {
                        "x": "0.8",
                        "y": "0.8"
                    }
                },
                {
                    "type": "scale",
                    "target": {
                        "type": "trigger",
                        "value": "",
                        "blockName": "",
                        "options": ""
                    },
                    "timing": {
                        "isStartingState": false,
                        "start": 0.1,
                        "duration": 0.2,
                        "easing": "outCirc",
                        "customEasing": ""
                    },
                    "value": {
                        "x": 1,
                        "y": 1
                    }
                }
            ]
        }
    ],
    "locations": [
        [
            {
                "param": "all",
                "operator": "==",
                "value": ""
            }
        ]
    ]
}