Eu tenho um link no meu site com bordas.

HTML:

<p id="hero4"><a href="menu.html">Explore our menu</a></p>

CSS:

#hero4 {
border:1px solid white;
border-radius:5px;
width:150px;
height:30px;
margin:auto;}

Gostaria que a "caixa" inteira ficasse cinza quando um usuário passasse o mouse sobre ela, como o botão "criar o seu" no site da Starbucks. Agora, eu tenho:

#hero4 a:hover {
background-color:grey;}

mas apenas a pequena área retangular ao redor do texto fica cinza. Como posso alterar meu CSS para que toda a área dentro da borda mude de cor?