I made up this solution inspired by the post and comments on this excellent blog

<a href="#" class="button add">Add</a>
<a href="#" class="button delete">Delete</a>

a.button{
	display:block;
	background-position: 6px;
	background-repeat:no-repeat;
	font-weight:bold;
	font-family: Trebuchet MS, Tahoma, sans-serif;
	font-size: 0.7em;
	text-decoration:none;
	text-indent:30px;
	color:#555555;
	background-color:#EAEAD7;
	border:#CCCCCC solid 1px;
	height:30px;
	width:190px;
	line-height:30px;
}

a:hover{
	background-color:#F3F3E9;
	color:#737373;
}

.add {
	background-image:url(add.png);
}

.delete {
	background-image:url(delete.png);
}

any idea how can I put those buttons next to each other instead of below each other?
I tried removing the display:block from the but the button collapsed!

Update:
If you want to align the buttons next to each other, add

float:left;

to the CSS class of a.button, thanks to Stephan!

Download here