This code is supposed to style button when clicked and to increase the length of the style even after click for better looking. Or is there any other way to do it? Thanks.
// When button is clicked, apply longer style so it looks better
document.querySelectorAll('button[type="button"]').forEach(button => {
button.addEventListener("click",event => {
//Apply style
event.target.style["boxShadow"] = "0 0 2px 3px rgba(250,189,22,0.95), inset 0 0 4px 0 rgba(250,195,35,1)";
event.target.style.borderRadius = "0.4rem";
event.target.style.transitionDuration = "45ms";
event.target.style.transform = "scale(0.98)";
setTimeout(() => {
//Remove the clicked style. Same as before
event.target.style.removeProperty("box-shadow");
event.target.style.removeProperty('border-radius');
event.target.style.removeProperty('transition-duration');
event.target.style.removeProperty('transform');
}, 110);
});
});
Your way of doing should work perfectly fine. Even though i would move the click specific styling to a CSS class and add the classname to the button when clicked and remove after given amount of ms.
document.querySelectorAll('button[type="button"]').forEach(button => {
button.addEventListener("click",event => {
event.target.classList.add("beautiful")
setTimeout(() => {
event.target.classList.remove("beautiful")
}, 110);
});
});
In your CSS you then would have the class "beautiful".
button {
transition-duration: 45ms; // needs to be moved to regular button style
}
.beautiful {
box-shadow: 0 0 2px 3px rgba(250,189,22,0.95), inset 0 0 4px 0 rgba(250,195,35,1);
border-radius: 0.4rem;
transform: scale(.98);
}
Add this class to all button
buttonClass{
// regular button css
transition: transform 0.5s; // set time for effect
}
buttonClass:active {
// CSS for on button click
transition: 0s;
}