Create a sliding door button on your website

Create a sliding door button on your website

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 video screencast, we do a quickly example of how this can work for a button. So all Internet web designers out there, this is the tutorial for you.

Hosted by ign.com
Creator's Site: www.css-tricks.com
Curated By: Pigeonchicken

Comments

Add your comment:

Deadly Crossbow (Made With Newspaper)

Mythbusters decided to test whether an inmate could "kill another inmate across the hall using a crossbow made of newspaper": "Jamie and Adam built separate crossbows for the myth and ...

World's Most Badass Swing Set

My stomach is doing somersaults just watching this. Looks fun, albeit incredibly dangerous. Take it down a notch (or fifty) and build an indoor swing this winter. Previously, Deeply Trusting Female ...

Jaw Dropping Trampoline Skills

Cirque Du Soleil look no further, Adam Menzies is your next act. This guy's trampoline skills are insane. My favorite part starts at 0:24. Speechless. Oh yeah. Almost forgot. Here Adam jumps up to the ...

Undulating LED Wave Sculpture

Beautiful LED sculpture made for the 2008 100% Design exhibition in Earls Court. Curious how it was made? Process images below the video. Previously, 24,000 LED Light-Up-My-Dress. LED Wand + RIFD ...

Robot Dance Off Gets Creepy

As November was coming to an end this year, the "6th Robo-One Gate in International Robot Exhibition 2009" dance competition took place. The contenders are just a little bit creepy, to say ...

loading...