How To: 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.

Want to master Microsoft Excel and take your work-from-home job prospects to the next level? Jump-start your career with our Premium A-to-Z Microsoft Excel Training Bundle from the new Gadget Hacks Shop and get lifetime access to more than 40 hours of Basic to Advanced instruction on functions, formula, tools, and more.

Buy Now (97% off) >

Our Best Phone Hacks

Gadget Hacks' tips — delivered daily.

Be the First to Comment

Share Your Thoughts

  • Hot
  • Latest