Here is the requirement. When a user clicks on the button, I want to change its box-shadow to provide visual feedback of their click. In an attempt to achieve this, I implemented the following solution:
button {
box-shadow: inset 0 0 4px 4px rgba(0, 0, 0, 0);
transition: box-shadow 0.4s;
}
button:active {
box-shadow: inset 0 0 4px 4px rgba(173, 216, 230, 1)
}<button>Click me</button>Despite setting the transition style value to 0.4 seconds, the animation does not execute as intended when the button is clicked. It appears that the button press duration may be too short for the effect to fully display.
Could someone suggest a solution to ensure the box-shadow change lasts for the intended 0.4 seconds, providing users with clear feedback on their clicks?
Access the codepen link here: https://codepen.io/AnirudhMS/pen/MWXWNNz (set the transition-duration to 1s for better visualization)