How does Google create its form buttons?

Question

I really like how Gmail has created the form input and accompanying "Search Mail" button.

See linked for screenshot.

However, I'm having a difficult time deciphering Gmails compressed HTML/CSS code to figure out how they created this look.

Can someone assist me in figuring out what HTML and CSS I need to use to recreate the combination of the text input + accompanying "search mail" button exactly as seen in Gmail (see screenshot and pay particular attention to how the text input touchs the button as well).

Thanks in advance.

UPDATE:

I found the following blog post but it did not have enough information for me to recreate what Gmail has done with the "search mail" button.

stopdesign.com/archive/2009/02/04/recreating-the-button.html

UPDATE 2

Even though I have got some initial awesome help from Michael below, I'm still at a lose for how to actually implement this. Any more help, would be really appreciated. Thanks!

Answer 1

Its a table with two columns. The search text box is in the left cell, the 'button' is in the right cell.

The 'button' is a div element with a bit of styling to give it the button look and feel. Its got a background gradient fill, padding and rounded right corners (but not left).

With cell spacing and padding of 0, the button is flush with the text field. Since the button doesn't have rounded corners on the left, but does on the right, it appears to be part of the single element.

The background is created as:

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3));

The rounding is:

border-bottom-left-radius: 0px 0px;
border-top-left-radius: 0px 0px;
border-bottom-right-radius: 3px 3px;
border-top-right-radius: 3px 3px;

A tool such as Chrome's developer tools, or FireBug for Firefox can help you work it out fairly quickly with the Inspect Element function.

Answer 2

You can do it by using css position properties, and use its techniques , i.e. some thing like this

<div class="button"> 
  <span class="top-right"> </span>
  <span class="bottm-right"></span>
</div> 

//css
.button{ postion:relative ; width : .. ; height:..; top : .. ; left: .. }
.top-right{postion:absolute;top:0;left:100%; width:..;height:..;display:block;;background:url(top_right_corner_img.gif);}

.bottom-right{postion:absolute;top:100%;left:100%; width:..;height:..;display:block;background:url(bottom_right_corner_img.gif);}

with some js to add click event ..

Answer 3

I found the answer here --> http://stackoverflow.com/questions/520640/googles-imageless-buttons/540316#540316