Boas, a cor do texto não muda, podes então abrir uma css apenas para o texto. Podes colocar, para forçar para o CSS:
.botoes-items h1{color: black}
.botoes-items h1:hover{color: orange;}
Se persistir, aí retiras o h1 do CSS que pus em cima, aí certamente funciona.
Correção do teu código HTML:
<div class="botoes-items">
<a href="contatos.html"><div id="contatosimagem"></div>
<h1>CONTACTOS</h1></a>
</div>
Assim a imagem e o h1 fazem parte do link. Até podes editar o padding, assim a área clicável pode ser maior.
Fazes assim, metes o <a href> com fundo/cor de background, assim sabes a área onde podes clicar. Usas o padding para adicionar alguns pixeis e fica mais fácil clicar na área.
Gostei de ver que estás a usar o transition (CSS3), assim dás alguma vida à página.
.botoes-items h1{color: black}
.botoes-items h1:hover{color: orange;}
Se persistir, aí retiras o h1 do CSS que pus em cima, aí certamente funciona.
Correção do teu código HTML:
<div class="botoes-items">
<a href="contatos.html"><div id="contatosimagem"></div>
<h1>CONTACTOS</h1></a>
</div>
Assim a imagem e o h1 fazem parte do link. Até podes editar o padding, assim a área clicável pode ser maior.
Fazes assim, metes o <a href> com fundo/cor de background, assim sabes a área onde podes clicar. Usas o padding para adicionar alguns pixeis e fica mais fácil clicar na área.
Gostei de ver que estás a usar o transition (CSS3), assim dás alguma vida à página.