Button width in css3

Question

I have a button and I want it to be a particular size

html

<a class="button icon Raise"
onclick="raiseButtonAction(realPlayer, gameState)" id="nupp1" href="#"><span>RAISE</span></a>

css

.button {
position: absolute;
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d),
    to(#65a9d7) );
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
-moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
color: white;
font-size: 19px;
font-weight: bold;
font-family: Segoe;
text-decoration: none;
vertical-align: middle;

But if I put for example width:100px; it doesn't change in size. Am I doing something wrong or you just can't change the size of a premade button?

Solution 1

That style is on an a element, which is an inline and won't accept a width. You could change it to be inline-block or block and then you'll have control over the width.

Solution 2

Try this..

.button {
display:inline-block;
min-width: 50px;
width: 80px;
padding:5px 10px;

}

Solution 3

You need to make your <a> into a block level element. Here's an example of it working.

I just added this to your CSS for .button:

display: block;
width: 200px;
text-align: center;

Comments

[Robin Maben]

You haven't specified width anywhere in the above code.

[Matt Ball]

I think you mean display: inline-block.

[Mark]

Inline-block is not supported in IE6 and 7 I believe.

[Mark]

No, block. Inline-block isn't supported in all browsers.

[Liza Daly]

The question specified CSS3, so IE 6/7 are probably not an issue.

[Matt Ball]

IE 6/7 accepts the value only on elements with a natural display: inline.

[Matt Ball]

IE 6/7 accepts the value only on elements with a natural display: inline, so there's no problem.

[Mark]

Mozilla browsers don't support it at all. Not sure if that's been fixed in new versions.

[Matt Ball]

That's just not true! Read the compatibility tables I linked.