The advantage of creating text buttons as opposed to image buttons is page load. Text loads a lot faster than images and for those with limited plans on mobile, you can really save them a lot of money when they access your site and there aren’t a lot of objects to load.
Let us create a simple vertical text menu using HTML and CSS.
Some people prefer to create their menu between div tags alone, but I prefer to create them as an unordered list, inside a div tag. So for this example, that’s what we’ll do. Your HTML code should look like this:
<div id="navmenu"> <ul id="menu"> <li><a href="">Home</a></li> <li><a href="">About Me</a></li> <li><a href="">Photo Album</a></li> <li><a href="">Family & Friends</a></li> <li><a href="">Contact Me</a></li> </ul> </div>
On your browser, you should see the following before any style is added to it:
Vertical Menu Without Style
Here’s the fun part. Let’s style the menu, and add a simple hover effect. In order to remove the bullets, we have to include that instruction on the stylesheet, under ‘unordered list’ and tell it to not include a list-style-type. The font size has also been set to ’12px’ under the div tag so everything in it is set to the same font size.
I’ll be using web-safe colours for this example.
The background colour will be #CCCCCC. The text will be white (#FFFFFF) and aligned to the center of the button. The border of each button will be #999999, except for the top border which will be slightly darker (#666666) to differentiate the two. Borders will also be a solid line and have a thickness of 1px. As all the items in the list are between the hyperlink tag, do not forget to add ‘a’ in the stylesheet. Your code should now look like this:
#navmenu {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul#menu {
list-style-type: none;
}
ul#menu li a {
background: #CCCCCC;
color: #FFFFFF;
text-align: center;
border-left: #999999 solid 1px;
border-right: #999999 solid 1px;
border-bottom: #999999 solid 1px;
border-top: #666666 solid 1px;
}
…and your buttons should look a bit like this:
Vertical Menu While Adding Style
Now it’s time to ‘correct’ the aesthetics of the buttons. First, let us remove the underline, fix the overlapping of the buttons, include some padding, and give them all the same width size:
#navmenu {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul#menu {
list-style-type: none;
}
ul#menu li a {
background: #CCCCCC;
color: #FFFFFF;
text-align: center;
border-left: #999999 solid 1px;
border-right: #999999 solid 1px;
border-bottom: #999999 solid 1px;
border-top: #666666 solid 1px;
padding: 3px 0px 2px 0px;
width: 150px;
display: block;
text-decoration: none;
}
Your buttons should now look like this:
Vertical Menu With Style
The only thing left is to add the hover effect. So when the cursor moves over a button, the background will change to white, the text will change to a dark gray #999999, and the border will change to almost black (#333333).
The hover CSS code is:
ul#menu li a:hover {
border: 1px solid #333333;
background: #FFFFFF;
color: #999999;
}
and the hover effect seen should be this:
Vertical Menu Hover Effect
If you were adding these buttons on a sidebar with its specified width, you wouldn’t have to add a ‘width’, it will automatically fit to the sidebar.
