CSS Button With Sliding Background Color

  • follow us in feedly
Published January 29, 2014 by Brad Knutson
CSS Button with Sliding Background Color

Styling buttons is something that designers do every day. Box shadows and gradients have been used over and over again when styling buttons, and I’m growing tired of it.

I’ve written recently about how I like the recent trend towards minimalist and “flat UI” designs. It’s not too far of a stretch to translate this design style to buttons.

I came across a site recently that had a really visually appealing button. When you hovered over the button, the background color changed, but it didn’t fade. Instead, it slid down from the top. Something about this button inspired me to create the examples you see below.

Example 1

Explore Our Products

Pretty neat effect, right? So let’s dive into some code.

The HTML

Nothing fancy here, just a regular div. This could also be an anchor tag, it doesn’t matter which element you choose.

The CSS

The Result

Explore Our Products

When you hover over the button, it appears as though the new background color slides in from the top. Believe it or not, this isn’t the case. The color that is sliding in from the top is actually an inset box shadow. By changing it’s position on the hover state of the button, we can create the effect of a new background sliding in over the top of the old color.

Let’s look at another example. Perhaps change up the colors, and add a border?

Example 2

Explore Our Products

The CSS

Explore Our Products

Because the background color that is sliding in is actually the box shadow, the way in which it slides can be changed by modifying the position of the shadow. Here are a few examples.

Top to Bottom
Bottom to Top
Left to Right
Right to Left
Diagonal

Pretty cool, huh?

What do you think of these buttons? Have a better solution? Let me know in the comments below!

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

9 thoughts on “CSS Button With Sliding Background Color

    1. Brad Knutson Post author

      Hey Josh – can you expand on your question a little bit, I’m not sure what you mean?

  1. shahdab

    Hi sir,

    i want to add border radius :

    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;

    code in this, but its now working. can you please guide me, what should i change here?

    Reply
    1. Brad Knutson Post author

      Are you trying to add a border radius to the line itself, or another element?

    2. shahdab

      Hi,
      now i got where i was wrong. yes, i tied using inline css. so now i used in class. now its working. thanks.

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="">