How to make a button like link with hover effects?

Question

How can I make the color of the text turn to black not only when I move the mouse cursor to the text, but also when the cursor enters the whole button area?

 .button { text-align: center; font-size: 1.5em; margin: 0 auto; width: 15%; padding: 8px; border: 2px solid; border-color: #e7dd84; background-color: rgba(236, 229, 167, 0.2); transition: 0.35s; } .button a, active { text-decoration: none; color: #e7dd84; } .button a:hover { text-decoration: none; color: black; } .button:hover { color: black; background-color: white; border-color: white; transition: 0.35s; } 

 <div class="button"> <a href="first.html">Go to site</a> </div> 

Answer 1

Do you mean like this?

 .button { text-align: center; font-size: 1.5em; margin: 0 auto; width: 15%; padding: 8px; border: 2px solid; border-color: #e7dd84; background-color: rgba(236,229,167,0.2); transition: 0.35s; } .button a, active { text-decoration: none; color: #e7dd84; } .button:hover a { text-decoration: none; color: black; } .button:hover { color: black; background-color: white; border-color: white; transition: 0.35s; } 

 <div class="button"> <a href="first.html">Go to site</a> </div> 

Answer 2

Instead of styling the <div> , I suggest to do it on the <a> tag directly.

I would use inline block, so that you don't need to specify the width , as inline block has the ability of shrink-to-fit based on length of the text. And on the container all you need is text-align:center to center that button horizontally.

Hover on the edges of the button you'll see the link also becomes available, because we set padding on it directly. Unless your original demo, you'll have to hover on the text to be able to click. This small improvement makes it more accessible, less confusing.

I also moved the class button onto the <a> , and add container to the <div> .

jsfiddle

 .container { text-align: center; } .button { text-decoration: none; background-color: rgba(236, 229, 167, 0.2); border: 2px solid #e7dd84; color: #e7dd84; display: inline-block; font-size: 1.5em; padding: 8px; transition: 0.35s; } .button:hover { text-decoration: none; background-color: white; border-color: white; color: black; } 

 <div class="container"> <a class="button" href="first.html">Go to site</a> </div> 

Answer 3

You have to give the color change to the link when you hover on the button.

Currently you have given the color to change when hoverd on the link inside the button.

Check updated snippet.

 .button { text-align: center; font-size: 1.5em; margin: 0 auto; width: 15%; padding: 8px; border: 2px solid; border-color: #e7dd84; background-color: rgba(236,229,167,0.2); transition: 0.35s; } .button a, active { text-decoration: none; color: #e7dd84; } .button:hover a { text-decoration: none; color: black; } .button:hover { color: black; background-color: white; border-color: white; transition: 0.35s; } 

 <div class="button"> <a href="first.html">Go to site</a> </div>