How to create a button link on navigation bar in CSS3?

Question

When I tried to create a button on which I have a link embedded with the functionality of you clicking the button even if it's outside of the exact string on navigation bar using HTML5 and CSS3, I can't create what I hoped. What am I missing on the following code?

HTML file

<nav>
     <ul id='main_menu'> 
        <li><a href='/'>Home</a></li>
        <li><a href='/l1'>Link1</a></li>
        <li><a href='/l2'>Link2</a></li>
        <li><a href='/l3'>Link3</a></li>
    </ul>
</nav>

and, CSS file

ul#main_menu li{
display: inline-block;
background-color: red;
border: 5px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
}

When I opened my browser and accessed to it, the result is a crappy button, with no functionality of clicking outside of the string. How can it be feasible?

Thanks.

possible duplicate of [How do I make the whole area of a list item in my navigation bar, clickable as a link?](http://stackoverflow.com/questions/3074454/how-do-i-make-the-whole-area-of-a-list-item-in-my-navigation-bar-clickable-as-a) - straight from the sidebar. — Matt Ball, Jun 13 '13 at 04:44

score 2 · Answer 1 · answered Jun 13 '13 at 04:56

please try the following css

ul#main_menu li {
display:block;
list-style:none;
float:left;
}
ul#main_menu li a{
display: inline-block;
background-color: #fefefe;
border: 2px solid;
padding: 3px;
border-radius: 5px 5px;
color:rgb(40,40,40);
text-decoration:none;
}
ul#main_menu li a:hover {
background-color: #ff0000;
border: 3px solid;
}

score 0 · Answer 2 · answered Jun 13 '13 at 04:46

Here is my solution.

HTML

<nav>
     <ul id='main_menu'> 
        <li><a href='/'>Home</a></li>
        <li><a href='/l1'>Link1</a></li>
        <li><a href='/l2'>Link2</a></li>
        <li><a href='/l3'>Link3</a></li>
    </ul>
</nav>

CSS

ul#main_menu {
    list-style:none;
}
ul#main_menu li {
display:inline-block;
}
ul#main_menu li a{
display: inline-block;
background-color: #fefefe;
border: 1px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
color:rgb(40,40,40);
    text-decoration:none;
}
ul#main_menu li a:hover {
    background-color: rgb(150,150,150);
}

score 0 · Answer 3 · answered Jun 13 '13 at 04:50

0

Code it self is bit wrong, here is what you have to use. place it in your css sheet

#main_menu ul{
list-style: none;
}

#main_menu li{
display: inline-block;
background-color: red;
border: 5px solid;
list-style: none;
padding: 3px;
border-radius: 5px 5px;
}

a{
text-decoration:none;
}

#main_menu li:hover{
background-color: green;
}

answered Jun 13 '13 at 04:50

IronMan

1
1

You put most elements inside `li` tag while the other two didn't. I'm curious about which is a better way, but I got what I expected from yours. Thanks. – Blaszard Jun 13 '13 at 08:20
you're applying all borders, padding to the list item not the whole list. so you can apply only inside li tag, no need to apply inside ul tag. one thing is necessary that is "list-style: none;" inside the ul. hope you got what you wanted. do not make anything more complex that will consume your precious time. – IronMan Jun 14 '13 at 18:11

score -1 · Answer 4 · answered Aug 07 '18 at 19:09

To create a button link it is very easy in html. The following code will give you html to make a button link very easily. You will also add a bit of css.

HTML

<body>
   <nav>
      <button onclick="window.location.href='https://example.com'">Example</button>
    </nav>
</body>

CSS

body {
   background-color: black;
}

nav {
   background-color: white;
}

nav button {
   background-color: red;
   height: 30px;
}

nav button:hover {
   cursor: pointer;
   background-color: blue;
}

How to create a button link on navigation bar in CSS3?

4 Answers4