Hover-crafting

Originally posted on Cognition

As a designer, my involvement in projects’ front-end development varies. Sometimes, I spend most of my time in code; other times, I work solely in Photoshop. But, there is one part of every front-end engagement that I always love to jump into the browser for: to create hover animations.

Hover animations are a site design element just like typography and color, so it’s important that designers take ownership of this step. Not only do hovers add to the look and feel of a site, but they also add an extra layer of usability for users with a mouse. A finished site may “work” without them, but these nuanced touches add polish and really reinforce a site’s personality. I like to think of their addition as “bonus design”—it’s an opportunity to better what’s being built.

Having a designer integrate animations directly into the browser saves time and lessens the risk of communication issues; the work also can be tested on any device. Perhaps more importantly, getting designers to own this part of the process is an easy way for designers with less coding experience to get their hands dirty. It’s like the gateway drug of web development. You don’t have to be super well-versed in CSS. The bulk of the code is already there, and you just need to change values and see what happens. The more time designers spend with their designs as code, the more comfortable they’ll feel, and the more they’ll understand how their designs get developed.

Best of all, it’s FUN! I’ve spent many hours (who needs friends?) adjusting easing, timing, and other CSS values—just to experiment with what can happen. Not sure where to start? Below are two examples I implemented on a recent project, along with how I got to each.

Highlighted Text

See the Pen fEiDJ by Sophie Shepherd (@sophshep) on CodePen.

Giving the illusion of highlighted text on hover seemed simple in my head. I wanted the text to get a background color when I moused over it. I am a CSS savant, so the first thing I did was declare a background color to appear when hovering over the linked text. This worked okay, but the color bumped up against the sides of the letters. So, I added some padding. But, since my headlines often broke onto multiple lines and the padding only applied to the first and last word of the text string, my solution appeared broken.

I had seen other sites accomplish this similar look, so I put on my spy outfit and headed out to the World Wide Web to inspect some elements. This is another crucial way to learn code. If you’ve seen something out there that you like the look of, inspect the code and adapt it for your own needs. I found what I was looking for on the new Vox.com. The site uses a harsh box-shadow to the left and right of the text. So simple! So attractive! And in combination with a CSS transition rule, it has a slick movement to it.

Pseudo Slashes

See the Pen zHdju by Sophie Shepherd (@sophshep) on CodePen.

With this example, we applied a diagonal slash to button styles, inspired by a similar slash in the logo treatment. This is all created with CSS, using :before and :after pseudo-elements to place the slashes on the link. One of the beauties of pseudo-elements is that we can do crazy things to them on hover, independent of the button elements themselves. On this project, our audience is an older, wealthier group, so I went with simply rotating the line. But what if the site was advertising gymnastics lessons? Or a clown? Or space camp? Endless animation possibilities.

Are you a designer who thinks you can’t code? Try editing some of the CSS values in Codepen. Look, now you can code. Feel free to put it on your résumé and list me as a reference. For bonus reading, I highly recommend this crudely named blog by Happy Cog alum Jenn Lukas—especially her article on remembering :focus.