iEntry 10th Anniversary
Add News
Photoshop Tutorials
How to create button-like navigation using CSS?
May 07, 2009 by admin
Using buttons that allow users to click through to another web page has been the norm since day one of the web. Designers are always looking for better ways to show the various types of menu navigation on web pages and CSS provides unlimited potential.
The navigation of your site is the most important part of the content architecture stage. Writing accessible pages with a menu system that is easy to use is crucial to retaining visitors. So, what is the best method for the menu links – graphics or just text buttons? I can tell you now that plain text is always the best way and using CSS to craft the buttons means you are not stuck with a dull and boring layout.
You don’t need stylish graphics for your menus to dazzle viewers. You want your visitors to be able to navigate to the information they want with the greatest of ease. Take a peek at some corporate web sites and you will find that graphic usage is kept to minimum. By using text more, the pages are more search engine friendly meaning your pages will be more exposed and therefore higher ranked on Yahoo and Google.
Use CSS to create your buttons and you will have more web friendly pages. Here is an example and we shall create this one together:
Using these methods, you can create menu buttons that are friendly to the search engines. Corporate web sites need their designers to be adding as much strength to the optimization of the web pages as possible. It only takes some lines with the correct text and you have buttons using CSS and HTML, and no requirement for the use of graphic image buttons.
Here is the code with comments explaining the usage, feel free to change the colors, sizes, etc.
<html>
<head>
<title>How to create button-like navigation using CSS?</title>
<style>/* each button text is placed using an unordered list, so the styles are applied to li attributes */
/* this positions the menu tight against the corner of the page */
#cssbuttons ul {
margin: 0 ;
padding: 0 ;}
/* this formats the text and the spacing between the buttons – adjust margin to increase spacing */
#cssbuttons ul li {
font-size: +1
font-family: Arial, Helvetica, sans-serif ;
margin: 0 ;
display: inline ;
text-align: center ;
}/* this defines the button size and color, border color, and padding changes the size */
#cssbuttons li a {
padding: 4px ;
text-decoration: none ;
color: #1523a6 ;
background-color: #ffffff ;
border: 1px outset #1523a6 ;}
/* this defines the color of the button background and text when the mouse hovers over it */
#cssbuttons li a:hover {
color: #ffffff ;
background-color: #1523a6 ;
}</style>
</head>
/* a div is used to position the text on the CSS styles above, you can add div positioning tags as necessary for your pages */
<div id=”cssbuttons”>
<ul>
<li><a href=”index.php”>Home</a></li>
<li><a href=”about.php”>About Us</a></li>
<li><a href=”services.php”>Services</a></li>
<li><a href=”faqs.php”>FAQs</a></li>
<li><a href=”blog.php”>Blog</a></li>
<li><a href=”contact.php”>Contact</a></li>
</ul>
</div></html>
By applying some simple styles, the buttons look a lot better than the graphic image choice. The aim is to own nice clean code. Each button can adopt various sizes and hover effects and you can easily edit the code.
CSS up those buttons and optimize your web code.
Popularity: 9% [?]
Related Posts
Add Your Comment