
- 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>
- Related Questions & Answers
- How to add and remove names on button click with JavaScript?
- With CSS add transparency to a button
- How to add Visible On click Button in HTML Code ?
- 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
- How to add a colored border to a button with CSS?
- Click a href button with Selenium and Python?
Advertisements