Trouble making dynamic button link change with mouse state

HTML & CSS
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

HI,

I;m not sure if this is what you are doing but if you make the anchor display:block and apply the padding and styles to the anchor then the whole area will be the active area for the hover effect.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.button {
	font-family:gill sans, arial, sans-serif;
	text-align: center;
	margin:25px 0 30px;
	margin-bottom: 30px;
}
.button a {
	display:block;
	background: #ff7700;
	padding: 10px 20px 10px 20px;
	font-style: italic;
	font-weight: bold;
	font-size:170%;
	color: #ffffff;
	text-shadow: 2px 1px #000000;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	box-shadow: 0px 2px 1px 1px #333333;
}
.button a:hover {
	background: #ff9933;
	color: #eeeeee;
}
</style>
</head>

<body>
<div class="button"><a href="#">Button</a></div>
</body>
</html>

Be careful when saying things like a:link.button because then you don;t style all the other states. It’s best to say a.button{} instead which will style all the states (unless you have already set up other rules for :link and :visited etc).

Also having div.button and a.button is rarely a good idea as it just makes it easier to make a mistake. Use .button for the div and then style the inner element with .button a{}.

If I misunderstood the question and you have many anchors inside that div then a different approach would be needed.

3

Ah, I see. Many thanks for the advice. I’ve also now been informed that :hover can be applied to any tag, which I wasn’t previously aware of, and this has immediately solved my problem. :slight_smile:

4

Yes but that doesn’t mean the whole area will be clickable and indeed will be confusing to the user assuming you are trying to create the effect shown in my above post. If the above demo is what you are trying to achieve then the way I have coded it is the best way to do it :smile:

5

I get it… thanks. I tried what you suggested briefly but either I didn’t check it properly or I missed something because when I resized the page the shape of the button collapsed again due to the styling being moved back to the (a) tag; I then decided to leave it as it was. I’ll do a test later using your exact code above until I fully understand it. :slight_smile: