css3 Styled Button Clickable

[PNWDweller]

Here is the css:

button.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#0056ab 0%,
		#003c75);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#0056ab),
		to(#003c75));
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	border: 2px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.3);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.3);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.3);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 0px 0px rgba(255,255,255,0);
}

And the button code I am trying to make clickable.  If I make it a form, it loses the formatting.  If I do an onclick, same thing.  I am trying to get this into a widget in Wordpress (text Widget)

<center><button type="button" name="http://www.example.com/order.php" value="http://www.example.com/order.php" class="css3button">Order Now</button></center>

[the better twin]

Not sure why you are using a button. You could just use an anchor tag or change it to a submit input inside a form and also change the cursor property so that people know it is clickable.

<form action="http://www.example.com/order.php">
    <input type="submit" value="Order now" class="css3button">
</form>

	<style type="text/css">
	input.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#0056ab 0%,
		#003c75);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#0056ab),
		to(#003c75));
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	border: 2px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.3);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.3);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.3);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 0px 0px rgba(255,255,255,0);
	cursor: pointer;
}
	</style>

If it is losing its properties, check that there are no conflicting styles in other stylesheets.

[PNWDweller]

Thank you!

 

I guess I was thinking in the wrong terms as far as button vs form.  It's been a long time since I have done any coding of any type. ;)