Header Banner
WonderHowTo Logo
WonderHowTo
HTML / XHTML / CSS
wonderhowto.mark.png
Gadget Hacks Next Reality Food Hacks Null Byte The Secret Yumiverse Invisiverse Macgyverisms Mind Hacks Mad Science Lock Picking Driverless

How to Create a sliding door button on your website

"How to Create a sliding door button on your website" cover image

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.

Video not playing properly? Click here to see the original video

Apple's iOS 26 and iPadOS 26 updates are packed with new features, and you can try them before almost everyone else. First, check Gadget Hacks' list of supported iPhone and iPad models, then follow the step-by-step guide to install the iOS/iPadOS 26 beta — no paid developer account required.

Related Articles

Comments

No Comments Exist

Be the first, drop a comment!