position:relative for input element?

Envato Authors Theme Authors
1

I’m trying to make a button with a subtext using HTML and CSS.

I want it to look like this:
http://img820.imageshack.us/img820/4878/buttonxn.png

HTML


Change button text with simple HTML

CSS

/* Huge Button with subtext */
input#hugeBtnSubtext {
	position:relative;
	margin:0;
	padding:0;
	font-size:32px;
	line-height:12px;
}
input#hugeBtnSubtext[type="submit"] {
	display:block;
	border:0;
	background:url(../images/buttons/buttonHugeBlue.png) no-repeat 0 0;
	height:62px;
	width:356px;
	cursor:pointer;
}
input#hugeBtnSubtext[type="submit"]:hover {
	background-position:0 center;
}
input#hugeBtnSubtext[type="submit"]:active {
	background-position:0 bottom;
}
span.subtext {
	position:absolute;
	top:20px;
}

The problem is that the span element won’t be positioned relative to the button… It is positioned relative to another relative positioned element earlier on the page.

Can’t input elements be to be positioned relative? Am I doing something wrong? How would you make this button?

Thanks,
graphic_dev

2

You can use the element and put the span inside.

Or, you can wrap both the input and the span element inside a div with position:relative.

Or, you can just put the input inside the span. :slight_smile:

3

The span will be positioned relatively to it’s parent, not sibling. Btw you should have top: -20px; there. Why don’t you try margin-top: -20px; instead of absolute positioning?