Creating Button out of Link

HTML & CSS
1

Need some help refactoring here…

Currently I have a hyperlink that Paul O’ helped me style into a really cool button that looks like it uses JavaScript.

Here is my HTML code…


<ul class="button2">
	<li>
		<a class="testButton" href="' . BASE_URL . 'members/create_account.php">Create Account</a>
	</li>
</ul>

Here is part of my CSS…


.button,
.button2 a{
	border: 1px solid #326985;
	height: 29px;
	line-height: 27px;
	padding: 0 2em;
	width: auto;
	overflow: visible;
	background: #3181bc url(/buttons/buttonGradientBlue.gif) repeat-x 0 0;
	color: #FFF;
	font-size: 12px;
	text-align: center;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 2em 0 1em 0;
	display: block;
	text-decoration: none;
}

.button2 a{
	margin-top: -5px;			/* NEW */
	height: 27px;
}

.button:hover,
.button2 a:hover{
	background-position: 0 -27px;
}

I am trying to eliminate the UL and LI because in most cases they are unnecessary.

Is it possible to add an ID or CLASS to my ANCHOR element and use the same styles above, or do I need a “parent” <div> to wrap the <a> and thus apply the styles to create a button?

Thanks,

Debbie

2

Yep. Looks like it. You can do what I just did and test it.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html><head><meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>{ visibility: inherit; } Testing</title>
<style type=“text/css”>
<!–
a {
border: 1px solid #326985;
height: 29px;
line-height: 27px;
padding: 0 2em;
width: auto;
overflow: visible;
background: #3181bc url(/buttons/buttonGradientBlue.gif) repeat-x 0 0;
color: #FFF;
font-size: 12px;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 2em 0 1em 0;
display: block;
text-decoration: none;
margin-top: -5px; /* NEW */
height: 27px;
}
a:hover{
background-position: 0 -27px;
}
–>
</style>
</head>
<body>

<a href=“’ . BASE_URL . 'members/create_account.php”>Create Account</a>

</ul>
</body>
</html>

3

Eric,

When I tried your code, the button spans the entire width of my screen.

I tried something similar to your code, except I had this…


<a class="testButton" href="' . BASE_URL . 'members/create_account.php">Create Account</a>

…and I have the same issue?!

Why didn’t that happen when I had the styles tied to the <ul> ??

Debbie

4

Hi. I imagine the ul had a width which contained the button. You could give the anchor a width. Or float it instead. Or give it display inline block. All inplace or addition to display block. Because its display block it will span full width.

5

Yeah, I just caught that myself.

Thanks,

Debbie