So, what if we want more buttons? No problem. Just duplicate everything, but change the class names. Here is what we have right now.
<div class="block"> <p class="home"><a href="http://axion-network.net">Home</a></p> </div>
All you need to do is add more paragraphs and class them accordingly.
<div class="block"> <p class="home"><a href="http://www.free2code.net">Home</a></p> <p class="email"><a href="mailto:epion@smarthack.com">Email</a></p> <p class="tutorials"><a href="http://www.free2code.net/areas/tutorials/">Tutorials</a></p> </div>
Now we just duplicate the CSS, and change the classes acordingly.
<style type="text/css">
.block
{
background-color: #ffffff;
width: 150px;
text-align: center;
}
.home
{
font-size: 18px;
font-weight: bold;
padding: 10px;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;
}
.home a
{
padding: 5px;
width: 90%;
text-decoration: none;
display: block;
background-color: #00cc66;
color: #990033;
border-top: #00cc66 solid 2px;
border-left: #00cc66 solid 2px;
border-bottom: #006666 solid 2px;
border-right: #006666 solid 2px;
}
.home a:hover
{
background-color: #009966;
color: #993333;
border-top: #006666 solid 2px;
border-left: #006666 solid 2px;
border-bottom: #00cc66 solid 2px;
border-right: #00cc66 solid 2px;
}
.email
{
font-size: 18px;
font-weight: bold;
padding: 10px;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;
}
.email a
{
padding: 5px;
width: 90%;
text-decoration: none;
display: block;
background-color: #00cc66;
color: #990033;
border-top: #00cc66 solid 2px;
border-left: #00cc66 solid 2px;
border-bottom: #006666 solid 2px;
border-right: #006666 solid 2px;
}
.email a:hover
{
background-color: #009966;
color: #993333;
border-top: #006666 solid 2px;
border-left: #006666 solid 2px;
border-bottom: #00cc66 solid 2px;
border-right: #00cc66 solid 2px;
}
.tutorials
{
font-size: 18px;
font-weight: bold;
padding: 10px;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;
}
.tutorials a
{
padding: 5px;
width: 90%;
text-decoration: none;
display: block;
background-color: #00cc66;
color: #990033;
border-top: #00cc66 solid 2px;
border-left: #00cc66 solid 2px;
border-bottom: #006666 solid 2px;
border-right: #006666 solid 2px;
}
.tutorials a:hover
{
background-color: #009966;
color: #993333;
border-top: #006666 solid 2px;
border-left: #006666 solid 2px;
border-bottom: #00cc66 solid 2px;
border-right: #00cc66 solid 2px;
}
</style>
‘m not going to show all of the style sheet now, as you can see, it takes up a lot of room. I will only show the selectors we are working with. Needless to say, keep all the other stuff were it is. With that said, let’s change the margins to make the buttons fit and remove the padding properties I’ve highlighted in blue.
.home
{
font-size: 18px;
font-weight: bold;
padding: 10px;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
}
.email
{
font-size: 18px;
font-weight: bold;
padding: 10px;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
}
.tutorials
{
font-size: 18px;
font-weight: bold;
padding: 10px;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
}
Don’t want vertical buttons? No problem. Remove the block class and it’s contents from your CSS and make the alterations I have indicated in red. You see, the block attribute was only to keep things in order. But now that we are using positioning, we don’t need it. If you don’t understand what I mean, remove the block attribute, save and refresh, and see what happens before you make the alterations below.
.home
{
font-size: 18px;
font-weight: bold;
padding: 10px;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
position: absolute;
top: 10px;
left: 5px;
}
.email
{
font-size: 18px;
font-weight: bold;
padding: 10px;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
position: absolute;
top: 10px;
left: 115px;
}
.tutorials
{
font-size: 18px;
font-weight: bold;
padding: 10px;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
position: absolute;
top: 10px;
left: 225px;
}
If you want, you can put the block class back in the CSS, and make a few adjustments, like changing the background colors. You may need to mess with the positions to get it to look right. You also need the height attribute to make the color appear.
.block
{
background-color: #336699;
width: 350px;
height: 50px;
text-align: center;
position: absolute;
top: 10px;
left: 3px;
}
Well, that’s the end of my CSS buttons tutorial. I suggest you go and learn JavaScript and Dynamic HTML, then you can make complicated Dynamic HTML menus.
