- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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 a pressed effect on button click with CSS
You can try to run the following code to add a pressed effect on the click of a button
Example
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: orange;
color: white;
border: none;
border-radius: 7px;
box-shadow: 0 5px #999;
display: inline-block;
padding: 10px;
font-size: 16px;
cursor: pointer;
text-align: center;
outline: none;
}
.button:hover {
background-color: blue;
}
.button:active {
background-color: orange;
box-shadow: 0 5px gray;
transform: translateY(2px);
}
</style>
</head>
<body>
<button class = "button">Result</button>
</body>
</html>
Updated on 24-Jun-2020 08:29:55
- Related Questions & Answers
- How to add and remove names on button click with JavaScript?
- With CSS add transparency to a button
- Add a blur effect to the shadow with CSS
- Add a blue background color to simulate a pressed button in Bootstrap
- Set Button on Image with CSS
- Create a transition effect on hover pagination with CSS
- How to click on a button with Javascript executor in Selenium with python?
- JavaScript Sum function on the click of a button
- How to flip an image (add a mirror effect) with CSS?
- How to add rounded corners to a button with CSS?
- How to add a button to an image with CSS?
- Fade in on Button hover with CSS
- Click a href button with Selenium and Python?
- How to add a colored border to a button with CSS?
- How to trigger a button click on keyboard "enter" with JavaScript?
Advertisements