Hover with padding

Setting <a> to display:block is key for this one.

by Matthew Day

HTML

<div class="wrap">
    <div class="button">
        <a href="#">Click me</a>
    </div>
</div>

CSS

.wrap {
	width: 200px;
	margin: 60px auto;
}

.button {
	border: 1px solid #333;
	text-align: center;
}
a {
    display: block;
	color: inherit;
	padding: 12px;
	text-decoration: none;
	border: 1px solid #333;
}
a:hover {
	color: red;
}