Some of my favorite things to style with CSS are hover effects, in part because they are so easy to apply. Here are a list of CSS properties that work well when changed with the CSS
hover selector, transitioning in and out of the hover state seamlessly.
Changing the color works especially well when used with other effects.
I prefer it when the color gets lighter on hover, like so:
Note that I said border color rather than just adding a border. If you don't have a border and then add it on hover, you'll notice that the element may resize in the process. Additionally, the border instantly removes itself after hover instead of gradually. Notice the difference between the two elements in this CodePen:
Notice how just by changing the border radius, we can tranform a button-shaped
div into a tab shaped one.
This is one of my favorites, as it can make a button or other element really come alive. Note, however, that unless you are ok with your element resizing horizontally, you will need to make sure that your text has space to grow. Notice how the top element is able to accommodate the increased letter spacing without resizing while the bottom one is not.
A shadow can give the text a nice 3D effect.
A shadow can give an element a nice 3D effect as well:
Just for fun, let's combine all the effects together:
Haha So, perhaps all of them together is a bit overkill, but a few of them combined can really bring new life to an otherwise dull design. Of course, hover effects don't work on mobile devices, so a large chunk of users won't even see them, but they are fun to play with nonetheless.