A Web Design Community curated by Chris Coyier

#17: Sliding Doors Button

By: Chris Coyier on: 11/24/2008 with

While sliding doors is far from a new concept and will be obsoleted once we see wider support for multiple backgrounds (CSS3), it is still a good one for your bag-of-tricks. The theory is that if we have an extra hook in our markup, we can apply two overlapping background images to a single spot of text. When that text grows or shrinks, these overlapping images and reveal more of themselves creating the illusion it is a single expandable graphic. In this screencast we do a quickly example of how this can work for a button.

Running time: 14 minutes

Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)

Get the Flash Player to see this player.

This comment thread is closed. If you have important information to share, you can always contact me.

* This website may or may not contain any actual CSS or Tricks.