I have a link button that I want to have change colour in hover and active mouse states. However, the link is set inside a <div> tag which changes shape reactively when the window is resized, but only the <a> tag responds to the hover and active states. Can anyone explain how I can make my whole button change with the mouse state and not just the <a> element? Alternatively, how can I code for the <a> tag so that it forms a tidy button with corner radius that changes shape reactively when the window is resized?

Thanks in advance.

These are the lines of CSS code I'm using.

div.button {
text-align: center;
margin-top:25px;
margin-bottom: 30px;
padding: 10px 20px 10px 20px;
background: #ff7700;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
box-shadow: 0px 2px 1px 1px #333333;
}

a:link.button {
font-family:gill sans, arial, sans-serif;
font-style: italic;
font-weight: bold;
font-size:170%;
color: #ffffff;
text-shadow: 2px 1px #000000;
}
a:hover.button {
background: #ff9933;
color: #eeeeee;
}

What you need to do is set the <a> element to display:block; this will cause it to use the entire content area of the containing <div>.

 

However you need to take the padding off of the container and put it on the <a> element.

 

Also it is easier to set the hover event on the container.

 

Assuming the HTML structure is something like the following:

<div class="button"><a href="http://www.example.com" class="button">Link</a></div>

Use the following CSS:

div.button {
text-align: center;
margin-top:25px;
margin-bottom: 30px;
padding: 0px;
background: #ff7700;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
box-shadow: 0px 2px 1px 1px #333333;
}

div.button:hover {
background: #ff9933;
color: #eeeeee;
}

a.button {
display:block;
padding:20px;
font-family:gill sans, arial, sans-serif;
font-style: italic;
font-weight: bold;
font-size:170%;
color: #ffffff;
text-shadow: 2px 1px #000000;
text-decoration:none;
}