Bigger Rollover Buttons

programming web dev
1

I’m trying to make some simple rollover buttons. Their background color should change upon rollover. I attempted to add padding to make the buttons bigger, but the background leaked out of the container:


<div class="actionLink">
	<a href="#">Action Link 3</a>
</div>

<div class="actionLink">
	<a href="#">Action Link 2</a>
</div>

<div class="actionLink">
	<a href="#">Action Link 1</a>
</div>



.actionLink {
	float: right;
	border: 1px solid #CCCCCC;
	padding: 2px;
	margin: 5px;
}

.actionLink a {
	display: block;
	width: 100%;
	height: 100%;
	background: #fef6e2;
	text-decoration: none;
	padding: 10px;
}	

.actionLink a:hover {
	background: #f0e8d5;
}