Make fancy buttons using CSS sliding doors technique

Make fancy buttons using CSS sliding doors technique

This article will show you how to create fancy buttons using CSS sliding doors technique. It is much better to use this technique than to use image buttons because you can apply the style to any link and at the same time you don’t have to create an image for each button. I posted this one on Morning Break weblog but due to its popularity I decided to publish it here.

What is sliding doors technique?

The technique is very simple. If we want to have a dynamic-width button, we have to find a way to stretch it horizontally. We will accomplish this if we create two background images that will define the button: one for the left side and one for the right side - like in the example below.

LEFT                                                                                                           RIGHT

Smaller, right image will slide on the top of the larger, left image (that why it is called sliding doors). The more right image slides to the left, the narrower button will be and vice versa. The image below shows the technique.

Styling the button

First, let’s take a look at the HTML elements that will simulate button. We have <span> element within the <a> element. Span element contains left, wider image and text. The width of the text will determine the size of the button.

<a class=”button” href=”#”><span>Submit</span></a> 

Now let’s take a look at the CSS code. We have a .button class that will be applied to <a> element and .button span class that will be applied to <span> element within <a> element. We also have .button:hover span that will change the font style within <span> element.  And that’s all. Simple, eh? The comments in the code below describes each element.

a.button {
    /* Sliding right image */
    background: transparent url(’button_right.png’) no-repeat scroll top right; 
display: block;
float: left;
height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

a.button span {
/* Background left image */ 
background: transparent url(’button_left.png’) no-repeat;
display: block;
line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding: 7px 0 5px 18px;
}

a.button:hover span{
text-decoration:underline;
}

The result will look like the examples below.

PNG transparency issues

If you are CSS coder, you’ve probably ran in to png transparency problems many times. Even Microsoft is having problems with it http://runonce.msn.com/runonce2.aspx open in IE6. So I’ll tell you few problems and solutions I’ve handled so far.

First one is if you need just simple transparent image, without some special needs for example backgrounds etc. The solution would be png fix. I’ve used it many times but it has lots of faults, for example with padding, margins and absolute positioning. Sometimes i can mess up the rest of your JavaScript files, but anyway very useful script. Continue…

Vertical align div

One of current CSS left outs is vertical align div. And before CSS 3 comes we have to use some tricks to solve this problem. I looked over for some solutions and it all comes up to defining it as table and using vertical align. The second one appears a lot and it’s a nice solution, but it has two faults, I’ll tell you later about them, here’s the code first.

Idea is to place absolute div 50% left and top and then to move margin left and top half if it’s size.

Continue…

10 best CSS hacks

If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. I’ve written about some of them earlier on PNG transparency issues, Yellow fields in web form, Vertical align div etc..

Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.

1. Vertical align div

http://about.share4vn.com/2008/03/19/vertical-align-div/

2. Min-Height

Continue…

Most used CSS tricks

Earlier before I have written an article about current best CSS hacks which you can see here. And now here’s the list of today’s most used CSS tricks – tips. I have added image examples for most of them because of critics on CSS hacks article. If you think I have missed any please let me know

1. Rounded corners without images

Continue…