Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Add a pressed effect on button click with CSS
Adding a pressed effect on button click with CSS makes the user feel more interactive with the web page. It provides an immediate visual effect indicating that the button press has been registered, helping to improve the user experience.
In this article, we have a button on our web page. Our task is to add a pressing effect while clicking the button using different CSS techniques.
Syntax
button:active {
transform: transformFunction(value);
}
Approaches to Add a Pressed Effect on Button
Here are three approaches to add a pressed effect on button click with CSS −
Method 1: Using translateY() Function
The translateY() function moves the button down slightly when clicked, creating a pressed effect by simulating physical button movement.
Example
Here is a complete example implementing a pressed effect using the translateY() function −
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: #04af2f;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
font-family: Verdana, sans-serif;
transition: transform 0.1s ease, box-shadow 0.1s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: translateY(3px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<h3>Button with translateY() Press Effect</h3>
<p>Click the button below to see the pressing effect.</p>
<button class="btn">Click Me</button>
</body>
</html>
A green button appears with a shadow. When clicked, the button moves down 3px and the shadow reduces, creating a realistic pressed effect.
Method 2: Using scale() Function
The scale() function shrinks the button slightly when clicked, making it appear as if it's being pressed inward.
Example
Here is a complete example implementing a pressed effect using the scale() function −
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: #04af2f;
color: white;
padding: 12px 24px;
border: none;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
font-family: Verdana, sans-serif;
transition: transform 0.1s ease;
}
.btn:active {
transform: scale(0.95);
}
</style>
</head>
<body>
<h3>Button with scale() Press Effect</h3>
<p>Click the button below to see the scaling effect.</p>
<button class="btn">Click Me</button>
</body>
</html>
A green button appears. When clicked, the button scales down to 95% of its original size, creating a subtle shrinking press effect.
Method 3: Using border and padding Properties
This approach changes the button's padding and border width when clicked, creating a pressed effect through size adjustment.
Example
Here is a complete example implementing a pressed effect using border and padding properties −
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: #04af2f;
color: white;
border: 4px solid #039126;
padding: 12px 24px;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
transition: all 0.1s ease;
}
.btn:active {
padding: 10px 20px;
border-width: 6px;
}
</style>
</head>
<body>
<h3>Button with Border/Padding Press Effect</h3>
<p>Click the button below to see the border and padding change.</p>
<button class="btn">Click Me</button>
</body>
</html>
A green button with a darker green border appears. When clicked, the padding decreases and border width increases, creating a unique pressed effect.
Conclusion
The translateY() and scale() methods provide the most realistic pressed button effects. The border/padding approach offers an alternative styling option but is less commonly used for press effects.
3K+ Views
