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. The ultimate Css for your website. website ideas with great inspiration
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.
Please visit www.jankoatwarpspeed.com for more information with regards to this technique.
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
No comments yet.
Leave a comment