How to Add a Pressed Effect on Button Click in CSS?

To add a pressed effect on a button click using only CSS, you can use the :active pseudo-class, which applies styles when the button is clicked or tapped.

1. Using CSS transform Property

The CSS transform property enables you to adjust an element's appearance by applying scaling, rotation, translation, or skewing effects. By leveraging the transform property, you can create a "pressed" effect on a button, making it look as though it's being pushed down when clicked.

Syntax

transform: scale()

Output

2. Using translate() Fnction

The translateY() function moves an element along the Y-axis by a specified amount. This movement can simulate the button being pressed downwards.

Syntax

transform: translateY()

Output

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.