[HTML/CSS] Div kleurt background-color wel, color niet.

[Carharttguy]

Hallo iedereen

Ik probeer dus linkjes te maken die eruit zien als knopjes.
Nu merk ik dat text-decoration of color totaal niet werkt op een <a> element in mijn div.
Zie deze fiddle: http://jsfiddle.net/eovo9x02/

Als ik een aanpassing doe aan de CSS, zodat hij mijn <a> element styled op die knop, dan werkt het wel als ik met mijn muis op het <a> element sta, maar er iets buiten, blijft mijn tekst gewoon dezelfde kleur als mijn achtergrondkleur, wat dus ook niet goed is.
Zie deze fiddle: http://jsfiddle.net/eovo9x02/2/

Hoe zorg ik dat text-decoration en color gewoon werkt in die div, ook op <a> elementen?

Ik hoop dat ik het goed heb uitgelegd, anders mag je zeker extra uitleg vragen.

Hartelijk dank

[Arjan90]

Je kan veel beter gewoon een <a> element opmaken met behulp van "display: block".

Zie: http://jsfiddle.net/eovo9x02/3/.

[dimako_]

code:

#button a
{
    text-decoration: none;
    background-color: #000;
    padding: 2px;
    border-radius: 4px;
    display: block;
}
#button a:hover
{
    color: #FFFFFF;
    background-color: #4286F5;
}

gebruik deze css.
Je styled nu de hele div met id button.
maar je moet de a-tag stylen ipv de div.

[Bosmonster]

Laat die div dan ook gewoon weg. En tenzij je wilt dat al je buttons je hele schermbreedte innemen is "inline-block" een betere keuze.