button width help

Hi Claznit

Do you mean a form button (the standard HTML type) or otherwise?

Hi!
Yes, its part of a registration process so I guess they are standard form buttons.
here is what i have so far.

.button {
color: #ffffff;
background-color: #8F9CAC;
border-style: outset;
border-width: 2.5px;
font-size: 10px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px 5px 2px 5px;
text-align: center;
font-weight : bold;
}

Any help you could give me would be great!
thanks. c

Could you post the snippet of HTML you're using this with?... I'll have a good look then.

er...well i had been hoping to control it all within the stylesheet.
these buttons appear all over the site so i had hoped to just do a
<td class="button">Submit Order</td> and then as if by magic.....
the point is that i dont want to have to control the width within the html because each one will vary and i'll have to guess as to how long the button with text and 5px on either side is.
am i crazy? is this possible?
thanks for taking the time on this.
c

There are many ways to do this, but the simplest would be to use the a href option. I've done an example with your code:

http://dev.c-o2.net/button.htm

I've cleaned up the CSS (since this is what should be looked for in all CSS... look into CSS shorthand, it becomes second nature and easier to use).

Your CSS was mostly fine. Simply using it on a link makes it easier to use. The width will automatically alter to the length of the text within, and use the padding you've specified.

I've added a rollover as well. Change at will. Here's the CSS code:

 a.button 
 	{ 
 	color: #fff; 
	background: #8F9CAC; 
	border: 2px outset; 
	font: bold 10px/10px Verdana, Geneva, Arial, Helvetica, sans-serif;; 
	padding: 2px 5px; 
	text-align: center;
	text-decoration: none;
	} 
 a.button:hover
 	{
 	background: #933;
 	}

And here's the example HTML:

<h5>Using an anchor-link:</h5>
<a class="button" href="#">Click Me!</a>
<a class="button" href="#">Big Click</a>
<a class="button" href="#">Biggest Damn Click of Them All</a>

wow. check you out! thank you so so much.
you've made my day.

co2,
sorry to bother you again but....i've just figure out that most of my buttons will not be associated with a href but instead will be submit <input type="submit> within a <td>
is there a workaround that you know of?
clare

This is why I asked originally... you can amend the style of the an input button, albeit not as robust, but almost.

Have a look at my example now:

http://dev.c-o2.net/button.htm

The last button is a form input submit button. The Safari browser will not show anything except a standard button, which is fine. But other browsers should display it similar to the other buttons.

Unfortunately, Internet Explorer 6 will not show the hover state of the button. It will show a click sort of action when pressed though. Anyway, who uses Internet Explorer :roll:

ok. great. thanks.
but now i'm back to my original issue which is that i i have to state the width of the button either in my html or my css - the beauty of the href (which i now know thanks to you) is that it controls the width....
thanks again for your help.
clare

You don't need to state any width for the input button, it's working the same way as the <a href...> button isn't it? (Auto-expanding to the width of the text)

yes, it auto-expands, but I can't control the width of the button (ie - i need the text to be centered with say 5 pixels on either side before the button ends)
i think i'm just confusing myself at this point. :? i'll play around and on the offchance that i find something i'll share the wealth...thanks for your help.

You can try something like this for the width of your button:

padding: 0px 5px;
height: 22px;
width: auto;

the 'auto' width will allow your button to vary in width, with the set amount of padding you desire.

On an aside, IE rules! (just kidding...)

I'm trying to apply an auto width to ASP generated buttons and I've added class="button" to my inputs but I can't get the CSS to work. I thought it would be this:

input.button { width: auto; }

but that doesn't do it.