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...
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...
Code 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