Creating Simple 'Animated' Hover Effects with CSS

[Frimatek]

Hover effects are commonly used in web design; for example, a button may adopt a slightly different background color when the cursor hovers over it. Another appealing way to add a hover effect is using very simple CSS animations. It’s just slightly less common and can make your website just slightly more unique. It only takes a minute to implement!

Transform Effects
There are several ways to add simple animations. For example, you could make an object move up slightly. Preview: http://g.recordit.co/bap86WFHek.gif

This can be achieved using just one line of CSS (in this case using class translate-y):

.translate-y:hover{
  transform: translateY(-2px);
}

You can easily adapt this in order to make the object move up:

.translate-y:hover{
  transform: translateY(2px);
}

Generally, 2px is a safe limit. On higher numbers, transformations may start to look glitchy on some browsers.

Shadows
Adding a shadow on hover can also give an interesting touch beyond just changing colors. Preview: http://recordit.co/PwG2mvT1O4

This can be achieved using just one line of CSS (in this case using class boxshadow):

.boxshadow:hover{
  box-shadow: 0 2px 4px rgba(56, 56, 104, 0.17);
}

You can adapt the numbers and colors to get the desired effect. You can experiment with different shadow looks here: jsfiddle.net/nnrt9yaf/.

Transform & Shadow
Personally, I prefer combining both, because it gives a pretty cool effect. Preview: g.recordit.co/GlPv4VTlNH.gif

This can be achieved using the following CSS (in this case using class hoverswagception):

.hoverswagception:hover{
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(56, 56, 104, 0.17);
}

Of course, you can also mix & match and add other effects (different text & background colors, etc.). By playing around with these two very simple pieces of CSS, you can create some pretty cool effects. Just don’t overdo it, because you’ll scare your visitors!

[kyle]

Thanks for sharing, @Frimatek! There are some formatting options when posting code so they stand out a bit…just fyi.

[Frimatek]

Hey @kyle ,

I tried using these options but for some reason it’s not showing anymore (didn’t seem to work in the preview either). Am I doing anything wrong?

[kyle]

Sure, just click he code brackets <> when adding a post and you’ll see a highlighted area that is indented that you can type into. When you do the code will look like this

This is a code snippet

You can also add three bacticks to the start and end of a code snippet. I edited the first one of your snippets so you could see what it looks like.

[Frimatek]

@kyle Thanks a lot, that definitely looks a whole lot better! When I initially clicked those buttons upon posting it just indented the text and didn’t add the backticks, but it seems to be working fine now. Thanks!