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? - straight from the sidebar. — Matt Ball
– Matt Ball, Commented Jun 13, 2013 at 4:44

Ramesh · Accepted Answer · 2013-06-13 04:56:11Z

2

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;
}

answered Jun 13, 2013 at 4:56

Ramesh

3473 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sehab · Accepted Answer · 2013-06-13 04:46:56Z

0

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);
}

answered Jun 13, 2013 at 4:46

Sehab

2592 silver badges11 bronze badges

Comments

IronMan · Accepted Answer · 2013-06-13 04:50:14Z

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, 2013 at 4:50

IronMan

11 bronze badge

2 Comments

Blaszard Over a year ago

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.

IronMan Over a year ago

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.

Ayaan · Accepted Answer · 2018-08-07 19:09:28Z

-1

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;
}

answered Aug 7, 2018 at 19:09

Ayaan

1671 silver badge11 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related