Css button menu
- Thread starter Taz
- Start date
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);
}
<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.
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.
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>
Affiliates
