# Bigger Rollover Buttons

**URL:** https://forum.kirupa.com/t/bigger-rollover-buttons/242056
**Category:** web dev
**Created:** [October 21, 2007, 8:56pm UTC](https://forum.kirupa.com/t/bigger-rollover-buttons/242056 "2007-10-21T20:56:48Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)
#### Post date: [October 21, 2007, 8:56pm UTC](https://forum.kirupa.com/t/bigger-rollover-buttons/242056/1 "2007-10-21T20:56:48Z")

</div>

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:

![](http://forum.kirupa.com/uploads/kirupa/4104/802dc3bd5edf98ba.gif)

```auto

<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>

```

```auto

.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;
}

```