CSS Button With Sliding Information

I’ve been working a lot lately on trying to increase conversions for several products. One issue I’ve face with call to action buttons is that it’s sometimes difficult to convey information in an easy to consume format in such a small amount of space.

I searched the web for some good example of CSS buttons, and came across a really slick example I’d like to share with you today.

Example

Download
Size: 52 KB

I really like how the button is clean looking, and when you hover over it, you immediately get more information about what you’re downloading. Of course, this doesn’t need to be limited to download buttons, it could be used for pretty much any other call to action (form submissions, email list subscriptions, etc).

Let’s dive in and break this down.

HTML

The HTML for the button is really straight forward. Think of the button as two distinct areas – the primary button face (which is shown by default), and the secondary button face (which is shown on hover).

Nothing too crazy here. The only slightly confusing part is the span tags, which are used to display the cloud and drive icons with CSS font icons – I’ll touch on that in a minute.

As I mentioned, the button itself is just two distinct sections, or divs.

Let’s look at the CSS now.

CSS

The first thing we need to do is import the font icons, so we’ll use one of my personal favorites, Font Awesome.

Next, we’ll go about styling the buttons to create the look and functionality of the hover animation.

As you can see, the face-button class has a set height, and is set to overflow: hidden;, which will only display one portion of the button at a time. When the user hovers over the button, we set margin-top: -64px; (which is the height of the visible button area), and using CSS transitions, the button gracefully slides up revealing the button information, and hiding the original face.

Not overly complicated, but a really simple and sleek look and feel.

Download
Size: 52 KB

You can of course change the colors, fonts and icons, sizes, or anything else to match your color scheme and design. I used the colors in this example to match the colors on this site, feel free to change them up as you see fit.

What do you think of the button? Would mousing over a button like this make you more, or less, likely to click through? Let me know in the comments below!

Inspiration for this post came from this CodePen, and credit for the original example goes to Miro Karilahti

Categories Blog