Как придать вид кнопки с <div>?

Question

Я смотрю на кнопки, используемые на домашней странице твиттера, в частности на большую оранжевую кнопку «зарегистрироваться». Я вижу, что это определяется так:

<p id="signup-btn">
    <a id="signup_submit" href="/signup">
        <span>Sign Up</span>
    </a>
</p>

они просто используют css для отображения оранжевой кнопки (которая может быть просто jpg), а также css для указания появления прокрутки (еще один jpg) и, наконец, третье состояние для щелчка мышью (другое jpg) чтобы создать впечатление реальной нажимаемой кнопки?

Если это так, то на что мне обратить внимание, чтобы сделать то же самое? В моем случае я просто хочу сделать кнопку, я думаю, как:

<div class='mybutton'>Hello!</div>
.mybutton {
   bgcolor: red;
   bgcolor-mouseover: yellow;
   bgcolor-mousedown: green;
}

да что-то подобное было бы замечательно,

Спасибо

Answer 1

Посмотрите на их CSS:

background: #FA2 url(http://s.twimg.com/a/1275412898/images/fronts/bg-btn-signup.png) repeat-x 0px 0px;
border: 1px solid #FA2;
border-bottom-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-top-right-radius: 5px 5px;
color: #333;
display: block;
font: normal normal bold 18px/normal Arial, sans-serif;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-shadow: #FE6 0px 1px 0px;

Answer 2

Я бы использовал элемент BUTTON и CSS-спрайтов . Таким образом, вы можете стилизовать его так, как вам нравится, и вам не нужно оборачиваться событиями click () в JS. Просто используйте его везде, где вы используете обычную кнопку в форме.

РЕДАКТИРОВАТЬ : Коронат, вам, вероятно, следует прочитать это: Повторное обнаружение элемента кнопки . Их на удивление легко сделать визуально непротиворечивыми во всех браузерах, используя немного CSS.

Answer 3

Не рассматривал это специально, но это вполне возможно с помощью CSS; у них, вероятно, есть именованный стиль, использующий обозначение # signup-btn в CSS. Чтобы выяснить это, вы можете использовать IE или FireFox с FireBug, чтобы изучить CSS и увидеть, что именно они делают для стиля кнопок. Я очень рекомендую это.

НТН.