# Trouble making dynamic button link reflect mouse state

**URL:** https://forum.kirupa.com/t/trouble-making-dynamic-button-link-reflect-mouse-state/351947
**Category:** web dev
**Created:** [October 22, 2014, 5:20pm UTC](https://forum.kirupa.com/t/trouble-making-dynamic-button-link-reflect-mouse-state/351947 "2014-10-22T17:20:46Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![congay](https://avatars.discourse-cdn.com/v4/letter/c/3ab097/32.png) [@congay](https://forum.kirupa.com/u/congay)
#### Post date: [October 22, 2014, 5:20pm UTC](https://forum.kirupa.com/t/trouble-making-dynamic-button-link-reflect-mouse-state/351947/1 "2014-10-22T17:20:46Z")

</div>

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

---

<div class="post-metadata">

### Author: ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)
#### Post date: [October 23, 2014, 3:20pm UTC](https://forum.kirupa.com/t/trouble-making-dynamic-button-link-reflect-mouse-state/351947/2 "2014-10-23T15:20:04Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [October 23, 2014, 4:19pm UTC](https://forum.kirupa.com/t/trouble-making-dynamic-button-link-reflect-mouse-state/351947/3 "2014-10-23T16:19:27Z")

</div>

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

---

<div class="post-metadata">

### Author: ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)
#### Post date: [November 10, 2014, 6:30pm UTC](https://forum.kirupa.com/t/trouble-making-dynamic-button-link-reflect-mouse-state/351947/5 "2014-11-10T18:30:20Z")

</div>

What wasn’t helpful about our previous two answers?

Edit: Nvm, spammer.