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:

left door

And a shorter right side image :

right door

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.

The CSS, jQuery and HTML required for the technique are given below:

CSS:

a.more {
text-align:right;
color:#666;
font-weight:bold;
text-decoration:none;
background: url(button-right.jpg) no-repeat top right;
display: block;
float: left;
height: 42px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
margin-bottom:16px;
padding-right: 23px; /* CHANGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */

}
a.more span {
/* Background left image */
background: url(button-left.jpg) no-repeat;
display: block;
line-height: 42px; /* CHANGE THIS VALUE ACCORDING TO BUTTON HEIGHT */
padding: 0 0 0 23px;
}

a.more:hover{
color:#000;
}

jQuery:

Firstly, include the jquery library.


$(document).ready(function() {
$(‘a.more’).wrapInner(‘‘);
});

HTML

Read more

Note:
I have used jQuery to automate the process of putting the element inside the link. It is perfectly alright to manually enter

Read more

for every button, but using the jQuery mentioned above means just adding a class “more” to any hyperlink will suffice.

You can check out the demo of buttons of various widths made using this technique at:
http://blog.codez.in/post-files/slidingdoors/slidingdoors.html

Latest posts by Smarajit Dasgupta

  • Share/Bookmark