The sliding doors CSS technique to create a button or tab is very useful in interface design in terms of both flexibility and time saved. Often web designers and developers are required to make hyperlink-based rounded cornered buttons or even navigation tabs of varying widths. It is tedious to create them by slicing images for each. And it is not being very flexible to use just one width for all buttons or tabs in a page. The sliding doors technique uses two background images (one very wide and the other just about covering the rounded corners of one side).

I created the left “door” image to be very wide:

And a shorter right side image :

The technique uses a element inside a hyperlink (with a class “more” applied) with the left and right background images being applied to the span and anchor elements respectively.