Css button menu

Taz

Seasoned Veteran
Joined
Mar 1, 2009
Messages
3,652
Reaction score
2
FP$
1,032
I have been experimenting with css buttons and I make them with a <a class="button" href="index.html">Home</a>. How can I make that into a navbar menue?
 
Put all of your links inside of a div and style the div.

But there are dozens of other ways to do it you should really just use your imagination instead of asking for help.
 
It would help if you posted the code you used. I can't help if I don't know what you tried.
 
The html

<div id="body">
<div id="category"></div>
<div id="boards"></div>
<ul>
<li><a class="button" href="index.html">Home</a></li>
<li><a class="button" href="/forum">Forum</a></li>
<li><a class="button" href="register.php">Register</a></li>
<li><a class="button" href="login.php">Login</a></li>
</ul>

</div>

The Css

.button {
text-decoration:none
color:white;
font-size: 18px;
font-family: aruial, sans serif;
padding: 11px 35px 11px 35px;
border: 1px solid rgb(120,120,120);
float:left;
margin:2px;
background: rgb(82,178,214);
text-shadow: 0px 1px 0px rgb(67,137,167);
-moz-border-radius: 3px;
Border-radius: 3px;
background: -moz-linear-gradient(top, #72C0DE, #42ABD2);
position:absolute;
top:30px;
right:570px;
}
.button:hover {
1px solid rgb(130,130,130);
background: rgb(105,188,220);
background: -webkit-gradient(linear, left top, left bottom, from(#82C7E1), to(#5AB6D8));
background: -moz-linear-gradient(top, #82C7E1, #5AB6D8);
}
.button:active {
background: rgb(54,165,207);
background: -webkit-gradient(linear, left top, left bottom, from(#5AB6D8), to(#82C7E1));
background: -moz-linear-gradient(top, #5AB6D8, #82C7E1);
}
 
First off, whenever posting code put it inside the CODE tags, secondly, that's clearly not the entire document and from the looks of it this is the theme for a forum skin, which you should have specified. So posting all of it will be helpful and what software your using. Because right now I'm seeing a mess of code.
 
Well out of context it looks like a mess and i have no idea what I'm looking at.
 
I kinda fixed up the codes. If you want me to customize the stuff for you, send me a PM.

Here is what I got for you. Your coding was all over the place and it was really hard to work with. You need to group things.

Some of the codes were not written correctly so I took them out.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style type="text/css"> 

button {
padding:2.5px;
background-color:#666;
width:100px;
border-radius:3px;
color:white;
}

button:hover {
border:1.5px inset black;
}

a:link {color:white;}

#nav li
{
display:inline; padding:0; margin:0;
}
</style> 
</head> 
<body> 

<!-- Begin Body --><div id="body"><!-- Begin Category -->
<div id="category"></div> <!-- End Category --><!-- Begin Boards -->
<div id="boards"></div><!-- End Boards --><!-- Begin Nav -->
<div id="nav">
<ul> 
<li><a href="index.html"><button>Home</button></a></li> 
<li><a href="/forum"><button>Forum</button></a></li> 
<li><a href="register.php"><button>Register</button></a></li> 
<li><a href="login.php"><button>Login</button></a></li> 
</ul>
</div><!-- End Nav -->

</div><!-- End Body -->
</body>
</html>
 
I mostly use:
Code:
http://www.cssbuttongenerator.com
for styling buttons..

And for menu:
Code:
http://cssmenumaker.com

and edit them to my likings..
 
Back
Top Bottom