How to give the appearance of a button with a <div>?

Question

Hi,

I'm looking at the buttons used on twitter's home page, specifically the big orange 'signup' button. I see it is defined like this:

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

are they just using css to give the orange button appearance (which may just be a jpg), and also using css to specify the roll-over appearance (another jpg), and finally a third state for mouse-click (another jpg) to give the impression of a real clickable button?

If that's how it works, what should I look for to do the same thing? In my case I just want to make a button I guess, like:

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

yeah something like that would be great,

Thanks

Answer 1

Hey,

Haven't looked at it specifically, but that is entirely possible with CSS; they probably have a named style using the #signup-btn designation in CSS. To find out, you can use IE or FireFox with FireBug to examine the CSS and see exactly what they do for the button style. I would highly recommend that.

HTH.

Answer 2

Look at their 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 3

I'd use a BUTTON element and CSS sprites. That way, you can style it however you like, and don't have to screw around with click() events in JS. Just use it wherever you'd use a regular button in a form.

EDIT: Coronatus, you should probably read this: Rediscovering the Button Element. They're remarkably easy to make visually consistent across browsers using a little CSS.