Pruebe lo siguiente. No está optimizado y debería pulir o afinar alguna cosilla, en función del resto de elementos.
El borde de 1px es sólo a efectos visuales.
Código CSS:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba</title>
<style>
.botones {
width: 210px;
height: 30px;
overflow: hidden;
border: 1px solid #444;
}
.boton {
background-color: #036;
background-image: url(imagenes/gradiente.png);
border: 1px solid #036;
color: #036;
cursor: pointer;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
height: 30px;
margin: 0 2px 0 2px;
text-transform: uppercase;
width: 100px;
color: #fff;
}
.boton:hover {
background-color: #058;
color: #058;
}
.link {
display: block
height: 30px;
line-height: 28px;
text-align: center;
text-decoration: none;
width: 98px;
float: left;
}
form {display: inline; float: right;}
</style>
</head>
<body>
<div class="botones">
<a href="" class="boton link">Cancelar</a>
<form name="enviar" method="post">
<button type="submit" name="siguiente" class="boton" value="">Siguiente</button>
</form>
</div>
</body>
</html>