CSS & HTML
CSS & HTML, Free Tools, Javascript - Saturday, May 24, 2008 5:45 - 0 Comments
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. Continue…
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.

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
selector {
min-height:500px;
height:auto; !important
height:500px;
}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
<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
Most Popular Content
- Kopete, The KDE Instant Messenger
- Warning Signs You Can’t Ignore
- Robotic Jellyfish Swim and Fly at Hannover Fair
- The Real Indiana Jones
- Popular Wealth - Free Photoshop Brushes To Download
- 5 Ways To Combat Aging
- Inflatable robots could explore Mars
- Thinking the Way Animals Do
- Top 10 things to do in a blackout
- The most natural drug
- 30 Websites to follow if you’re into Web Development
- Please,I want you to help me with some of your books that will enable me to keep...
- You should also mention Ubercart (http://www.ubercart.org) a very powerful Drupa...
- Hello i am interessted on this script please can you contact me!?...
- Excellent article and oh so true.
Thanks...
- Well done.
If you use Ubuntu for, say, half a hour, you'll never go back to W...
- I own a "Super Battery" chinesse mobile phone, Chivak78, and I can assure you th...
- Thank You Very MUCH!!!
I had a working key, but the last time I reinstalled, it...
- Is this big deal end yet ?...