Button - Page 2

Tanax · 01-11-2008, 06:54 PM

I wanna code a button, such as in the attached image.

But I can't get it to work :S
So yea, I'm hoping you can fix it

They have rounded corners, just incase you didn't see.
The ends, I've cut out, so they are 2px wide, and 28px high, each.
The actual gradient of the button, is 1px wide, and 28px high.

I want the button to expand in <-> ways, if I write more stuff in the button.

HTML Code:

<div class="button">

	<div class="button-background">

		<img src="left.png" style="float: left; margin: 0;" />
		<div class="button-content">
		Test
		</div>
		<img src="right.png" style="float: right; margin: 0;" />
	
	</div>

</div>

The problem is, how would it be done so that the button expands? Because when I first had no width specified, it expanded all over the screen, even if I had just a little text..

Code:

.button-background {
	width: 100%;
	height: 28px;
	background: url(gradient.png) top left repeat-x;
}

.button {
	
	width: 40px;
	
}

.button-content {
	
	padding-top: 3px;
	margin: 0;
	
}

It works somewhat how I want when I don't have the button-content there. But if I add it, the right end gets pushed down..

And also, I'm assuming that this ain't expanding if I write more text.. :S