how is the search mail button implemented?

I am using Firebug, I just saw tha it is a div with css, but I dont get it how they did it?

<开发者_如何学Pythondiv id=":ri" class="J-Zh-I J-J5-Ji L3 J-Zh-I-Js-Zq" tabindex="0" role="button" style="-moz-user-select: none;">Search Mail</div>

I am trying to make something similar but I am just a beginner,I want that effect of the button but I don't get it how they did it? even I don't understand the css, I just copy this but no effect

.num1 {
-moz-border-radius: 2px 2px 2px 2px;
    background: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1) repeat scroll 0 0 transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #666666;
    cursor: default;
    font: 75% arial,sans-serif;
    margin: 0 8px 0 0;
    outline: medium none;
    padding: 3px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}


.num2{
 display: inline-block;
    position: relative;
}

.num3{
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topleft: 0;
    border-left-width: 0;
    margin-left: 0 !important;


}

Here just the CSSed div: http://jsfiddle.net/bmWGY/1/

You'll need much more if you want to do something with this div.

Gmail uses JavaScript to detect the click event on the div. In addition, classes are dynamically added/removed to give the "button" the correct styles.

It is much easier to style a div element correctly than to try to style input and button elements for a cross-browser solution.

It's likely a simple div with a javascript onclick function attached. If using jQuery or some other framework, the "action" can be defined elsewhere using the .click() or .bind() (for jQuery) functions. See the examples provided in the preceding two links to see this in action.