First of all create a design in photoshop.

1.Open new 450 x 27 px image.

2.Create new layer called “border” and fill background with #0066cc
Click Here

3. Then select “border” layer with Rectangular Marquee Tool (M), go to Select > Modify > Contract and contract it with 1 px and then delete the selection left.
Click Here

4. Create a new layer called “background” , then go to Select > Reselect (Shift+Ctrl+D) . Set foregound to #0099ff and background to #0099cc. Then right click on “background” layer, Blending Options > Gradient Overlay and make changes like in the image below.
Click Here

5. After make a selection with Rectangular Marquee Tool (M) on background layer like in image below, then create a new layer called “background_hover”.
Click Here

set background to #99ff00 and foreground to #99cc00 and fill that selection by right clicking on “background_hover” layer Blending Options > Gradient Overlay, after go to Blending Options > Stroke on the same layer and make the changes like in the second image below.
Click Here
Click Here

After saving background images we create a css file and write the following code and save it:
Click Here

Then we create a html file and write the following code and save it
Click Here

See the finished thing HERE