Trouble making dynamic button link reflect mouse state

programming web dev
1

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

2

You can apply :hover to your button as well. So you could change that last rule to use div.button :hover. I think that’d work fine.

3

You can also make an <a> have a display:block which will make it behave like a div.

5

What wasn’t helpful about our previous two answers?

Edit: Nvm, spammer.