Menu buttons as a active links - how to do this?

Question

Hi.
How to make/change entire menu buttons to behave as active links?

Thanks for help.
https://code.sololearn.com/WaV7DQJoBEwN/?ref=app

Answer 1

<a> is an inline element, you need to change its display to: display:block;
Some of your css styling for button should go to a.buttonlink instead.

Check out this link:
https://stackoverflow.com/questions/17530022/how-do-i-make-a-css-button-clickable

Here is the idea, just rearrange the color attributes and remove unnecessary code:

https://code.sololearn.com/WjDeh7LoN6Df/?ref=app

Answer 2

In web? Use < a> tags.

<a href="www.sololearn.com" > Sololearn </a>
You can refer to my code for all kinds of buttons:

https://code.sololearn.com/W09p784fsb2O/?ref=app

Sorry, if I didn't understand you correctly. Try to explain again.

Please use the correct tags in your posts.

Answer 3

I'm glad. 👍
You could also use span inside of <a>

Answer 4

Thanks.

Problem solved.
I changed the order of the tags and the <button> placed inside <a> tag. Only this one change make entire button clikable.

Now my html code for button section looks:

<nav>
<div class="btn-group">
<a class="buttonlink" href="#"><button>Home</button></a>
<a class="buttonlink" href="#footer"><button>About us</button></a>
<a class="buttonlink" href="https://www.sololearn.com/Profile/11380002" target="_blank"><button>My codes</button></a>
<a class="buttonlink" href="#shorthistory"><button>A short history of HTML</button></a>
<a class="buttonlink" href="#contact"><button>Contact</button></a>
</div>
</nav>

Answer 5

Sorry and Thanks for helping.

Now in my code only text is link, not whole button box.
How to make button box work as a link?