Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add 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. It helps in improving 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.
Approaches to Add a Pressed Effect on Button
Here is a list of approaches to add a pressed effect on button click with CSS which we will be discussing in this article with stepwise explanation and complete example codes.
Using translateY() Function
To add a pressed effect on the button, we are using the CSS text transform property in this approach. The transform property is used in rotating, scaling, moving, and skewing elements.
- Create a button using a button tag.
- Apply style on the button to improve the look of the button. We have added a border, set the font size, padding, background-color, and text color of the button. We have used border-radius property for round edges and changed the cursor to pointer using cursor property.
- Then we have used pseudo class :active property to add a pressed effect using the transform: translateY(3px); upon clicking the button. The box-shadow property creates a shadow around the button.
- We have used CSS transition property to create a smooth pressing effect of the button.
Example
Here is a complete example code implementing above mentioned steps to add a pressed effect on button click using translateY() function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Adding a Pressed Effect on Button Click
</title>
<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>
Adding a Pressed Effect on Button Click with CSS
</h3>
<p>
In this example we have used <strong>translateY()
</strong> function of <strong>transform</strong>
property to add a pressed effect on button click.
</p>
<button class="btn">Click Me</button>
</body>
</html>
Using scale() Function
In this approach to add a pressed effect on button, we are using scale() function of CSS transform property in this approach. The transform property is used in rotating, scaling, moving, and skewing elements.
- Create a button using a button tag.
- Apply style on the button to improve the look of the button. We have added a border, set the font size, padding, background-color, and text color of the button. We have used border-radius property for round edges and changed the cursor to pointer using cursor property.
- Then we have used pseudo class :active property to add a pressed effect using the transform: scale(0.95); upon clicking the button.
- We have used CSS transition property to create a smooth pressing effect of the button.
Example
Here is a complete example code implementing above mentioned steps to add a pressed effect on button click using scale() function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Adding a Pressed Effect on Button Click
</title>
<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>
Adding a Pressed Effect on Button Click with CSS
</h3>
<p>
In this example we have used <strong>scale()
</strong> function of <strong>transform</strong>
property to add a pressed effect on button click.
</p>
<button class="btn">Click Me</button>
</body>
</html>
Using border and padding Properties
In this approach we are using CSS border and padding properties to add a pressed effect on button.
- Create a button using a button tag.
- Apply style on the button to improve the look of the button. We have added a border, set the font size, padding, background-color, and text color of the button. We have used border-radius property for round edges and changed the cursor to pointer using cursor property.
- Then we have used pseudo class :active property to add a pressed effect. We simply decrease the padding and increase the border width. It creates a pressing like effect when clicked.
- We have used CSS transition property to create a smooth pressing effect of the button.
Example
Here is a complete example code implementing above mentioned steps to add a pressed effect on button click using border and padding properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Adding a Pressed Effect on Button Click
</title>
<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>
Adding a Pressed Effect on Button Click with CSS
</h3>
<p>
In this example we have used <strong>border
</strong> and <strong>padding</strong> properties
to add a pressed effect on button click.
</p>
<button class="btn">Click Me</button>
</body>
</html>
Conclusion
In this article, we have discussed three different approaches to add a pressing effect while clicking the button. These approaches are: by using transform translateY() function, scale() function and by using border and padding. Out of these three approaches, the third approaches is just for the practice purpose. You can use first two approaches for this given task.
2K+ Views
