Almost every web project has one or more buttons, when the button is clicked we need to give an indication to the person that the button was clicked. It can be through a message or change in the button's visual properties. The change in the visual property help to convey the message quickly and easily. The visual indicators are better if the user need to click one button from a group of buttons, here I listed 12 ways that can be used to provide visual indication that the user has clicked the button. All are simple designs using CSS properties, no JavaScript is used. The working logic is given as comments in the CSS area, I tried to keep the CSS code simple, you can use your creativity to make these better. I just tried to show different ways of creating hover effects, if you find any errors let me know. If you have any suggestion, please comment, Happy Coding.
Here is the codepen that contain all the 12 button hover effect examples.
Top comments (2)
Neato. btn5 is my favorite here. But why use an h4 for each button's text? I think for semantics and accessibility, a span might be better?
Yes, span would be an excellent choice, I was just trying to demonstrate some hover animation patterns.