better way of making this button

**ggalan** · 12-10-2010, 12:26 AM

can anyone help me write this more efficiently?

i have a button that is 150px X 120px with a simple text inside that i would like to have control over the placement.
I want the entire button to be clickable, so i placed a 1pixel gif as a img inside and gave it the same dimension as the button
then i had to move the entire img up so that it is placed within the main buttons parameter

seems a bit overcomplicated for something that can have a simpler solution

Code:

<html>
	<head>
		<style>
		#btnDiv{background-color:#CCC; width:150px; height:120px; text-indent:20px;}
		#btnDiv span{position:relative; top:30px; left:40px; background-color:#999;}
		#btnDiv img{margin-top:-20px;}
		</style>
	</head>
	<body>
	<div id='btnDiv'><a href='#'><span>btn</span><img src='x.gif' width='150' height='120' /></a></div>
	</body>
</html>

**Nile** · 12-10-2010, 01:00 AM

One question before I recode this - did you want an actual button like the type you'd see under a form, like "Submit"? Or did you want a clickable-link type button?

**ggalan** · 12-10-2010, 03:38 AM

more like the submit, maybe with 2 or 3 lines of text
thanks!

**Nile** · 12-10-2010, 03:53 AM

I'm sorry for asking that question originally, it seems like a link would be more ideal for this.

Code:

<style type="text/css">
a.button {
background-color:#CCC;
display: block;
width: 150px;
height: 120px;
line-height: 120px;
text-align: center;
}
a.button span {
background-color:#999;
}
</style>
<a href="#" class="button"><span>Btn</span></a>