13 replies [Last post]
claznit
Offline
newbie
london
Last seen: 10 years 5 weeks ago
london
Joined: 2004-03-12
Posts: 8
Points: 0

new to css. newer to forum.
trying to create buttons in css that vary in width depending on the length of text - the text would be centered with about 5 pixels on either side...its probably very simple but i'm stumped. can anyone help a damsel stuck in css?

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

button width help

Hi Claznit

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

The next sentence is true. The previous sentence is false. Discuss...

claznit
Offline
newbie
london
Last seen: 10 years 5 weeks ago
london
Joined: 2004-03-12
Posts: 8
Points: 0

button width help

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

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

button width help

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

The next sentence is true. The previous sentence is false. Discuss...

claznit
Offline
newbie
london
Last seen: 10 years 5 weeks ago
london
Joined: 2004-03-12
Posts: 8
Points: 0

button width help

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

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

button width help

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>

The next sentence is true. The previous sentence is false. Discuss...

claznit
Offline
newbie
london
Last seen: 10 years 5 weeks ago
london
Joined: 2004-03-12
Posts: 8
Points: 0

button width help

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

claznit
Offline
newbie
london
Last seen: 10 years 5 weeks ago
london
Joined: 2004-03-12
Posts: 8
Points: 0

button width help

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

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

button width help

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:

The next sentence is true. The previous sentence is false. Discuss...

claznit
Offline
newbie
london
Last seen: 10 years 5 weeks ago
london
Joined: 2004-03-12
Posts: 8
Points: 0

button width help

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

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 1 week ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

button width help

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)

The next sentence is true. The previous sentence is false. Discuss...

claznit
Offline
newbie
london
Last seen: 10 years 5 weeks ago
london
Joined: 2004-03-12
Posts: 8
Points: 0

button width help

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.

rice
Offline
newbie
NYC
Last seen: 9 years 47 weeks ago
NYC
Timezone: GMT+5
Joined: 2004-05-27
Posts: 1
Points: 0

claznit - button width 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...)

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 34 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

button width help

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference