как реализована кнопка поиска почты?

Question

Я использую Firebug, я только что увидел, что это div с css, но я не понимаю, как они это сделали?

<div 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>

Я пытаюсь сделать что-то похожее, но я простоновичок, я хочу этот эффект кнопки, но я не понимаю, как они это сделали?даже я не понимаю css, я просто копирую это, но без эффекта

.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;


}

Answer 1

Gmail использует JavaScript для обнаружения события click на div. Кроме того, классы динамически добавляются / удаляются, чтобы дать «кнопке» правильные стили.

Гораздо проще правильно оформить элемент div, чем пытаться стилизовать элементы input и button для кросс-браузерного решения.

Answer 2

Вот только CSSed div: http://jsfiddle.net/bmWGY/1/

Вам понадобится намного больше, если вы хотите что-то сделать с этим div.

Answer 3

Вероятно, это простой div с функцией javascript onclick.Если используется jQuery или какой-либо другой каркас, «действие» может быть определено в другом месте с использованием функций .click() или .bind() (для jQuery).Посмотрите примеры, приведенные в двух предыдущих ссылках, чтобы увидеть это в действии.