Coincido con C2am, para lograr esos degradados y los bordes redondeados, deberías comprender las propiedades que tiene CSS.
Pero te ofrezco una salida mentalmente mas sana. Diseñá una imagen de cómo se vería el fondo del botón (llamemosle: fondo_boton.jpg), y otra imagen cuando el mouse se posaría encima (fondo_boton_2.jpg). Entonces hacés lo siguiente:
<html>
<head>
<title>Creando un boton</title>
<style type=text/css>
#miboton a {
background-image: url(fondo_boton.jpg);
}
#miboton a:hover {
background-image: url(fondo_boton_2.jpg);
}
</style>
</head>
<body>
<div>
<a class=miboton href="#">Mi Boton</a>
</div>
</body>
</html>
Obviamente dentro de las propiedades del estilo "miboton", podés asignarle la tipografía que quieras y lógicamente asignarle el nombre correcto al botón que diseñaste.
Si querés que el fondo no se repita, en el Style usá la propiedad :
background-repeat:no-repeat;