CSS Hover Transitions Part 1

jordanjlatimer — Fri, 04 Sep 2020 22:42:36 +0000

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.

Color

Changing the color works especially well when used with other effects.

Background Color

I prefer it when the color gets lighter on hover, like so:

Border Color

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:

Border Radius

Notice how just by changing the border radius, we can tranform a button-shaped div into a tab shaped one.

Letter Spacing

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.

Text Shadow

A shadow can give the text a nice 3D effect.

Box Shadow

A shadow can give an element a nice 3D effect as well:

All Together, Now

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.

Forem: jordanjlatimer