Sopov.com freelancer, html and css tips and tricks

How to create stretch buttons, menus, boxes with rounded corners from PSD file to HTML code?

In this lesson i'll show you how to create rounded corners boxes, that can stretch down and right.

The fist sample is very easy to create. Buttons and menus usually stretch by "X" (from the left to the right).

We have PSD mockup (or image like gif, png, jpg) with button and now we have to add it to HTML:

First of all we have to create 2 background images  (i use Photoshop for it). Fist image will be our stretch background, and the second will be end of the button:

Download HTML/CSS

View Demo

First image:

Second image:

Note: I created first image with length 609px, you can create with any width, but i don't think that the button will be more than this.

Now we crate HTML:

<div class="button">
    <a href="/" title="Sample Button Text">Sample Button Text</div>
</div>
<div class="clr"></div>

Explanations:

I use DIV with class="clr" for clearing "button" div with style FLOAT: LEFT;

And now add CSS:

.button {
background: url(images/stretch-button-bg.png) no-repeat top left;
height: 59px;
float: left;
padding-left: 24px;
line-height: 260%;
}
.button a {
background: url(images/stretch-button-end.png) no-repeat top right;
height: 59px;
padding-right: 24px;
display: block;
text-decoration: none;
color: #4d4d4c;
}
.clr {
clear: both;
height: 0;
overflow: hidden;
margin: -1px 0 0 0;
}

Explanations:

I use line-height: 260% - this is for centered text by height - you can play with % value.

In next sample i will show how to create stretch box and it will be stretch by X and Y.

Here what we have to get:

ts the same what we did with stretch button background inside background, but here we will use it three times:

1. For the header of Box - two image (fist image stretch-box-bg.png is stretch background with length 1000px, second stretch-box-end.png is the end of our box)
2. For the context background (i use only one image stretch-box-content-bg.png for left and right side, because left and right side the same)
3. For the footer of Box (image stretch-box-btm-bg.png is stretch background with length 1000px, second stretch-box-btm-end.png is the end of our box in footer)

So first is our HTML:

<div class="bigBox">
    <div class="titleBox">
        <h1>Stretch box title</h1>
    </div>
    <div class="contextBackgroundLeft">
        <div class="contextBackgroundRight">
            <div class="clr"></div>
            <p>Sample text</p>
            <div class="clr"></div>
        </div>        
    </div>
    <div class="bottomBox">
        <div></div>
    </div>
</div>

and CSS code:

.bigBox {
width: 100%;
}
.titleBox {
height: 35px;
overflow: hidden;
background: url(images/stretch-box-bg.png) no-repeat top left;
}
.titleBox h1 {
margin: 0;
padding: 0;
height: 35px;
background: url(images/stretch-box-end.png) no-repeat top right;
line-height: 260%;
}
.contextBackgroundLeft {
background: url(images/stretch-box-content-bg.png) repeat-y top left;
}
.contextBackgroundRight {
background: url(images/stretch-box-content-bg.png) repeat-y top right;
padding: 0 10px;
}
.bottomBox {
background: url(images/stretch-box-btm-bg.png) no-repeat top left;
height: 22px;
}
.bottomBox div {
background: url(images/stretch-box-btm-end.png) no-repeat top right;
height: 22px;
}
.clr {
clear: both;
height: 0;
overflow: hidden;
margin: -1px 0 0 0;
}

Some tricks that i used in this tutorial:

<div class="contextBackgroundRight">
    <div class="clr"></div>
    <p>Sample text</p>
    <div class="clr"></div>
</div>        

As you can see i used DIV with class="clr". If you remove it, you will see white spaces in top and bottom. This happen because we use tag < p > (or h1, h2, h3, ul....) all tags that have margin or padding will broke the box without DIV from top and bottom.

That is it. If you have any questions, feel free to ask me. I hope it will be helpfull