CSS Button With Sliding Information

  • follow us in feedly
Published November 7, 2014 by Brad Knutson
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

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.

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

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">