HTML Code Tutorial

Tutor Ebook Download

Creating Buttons With CSS

The navigational system of your website is one of its most important features. You can use simple hyperlinks. You can use fancy 'Navbars' bult with Javascript. You can use simple button images with your hyperlinks.

You can also create buttons using CSS and HTML code which mimic the mechanical aspects of Js navbars. And these won't slow your pages or create errors in browsers that don't support Js.

Most of the code is set up in the Style Sheets. We use the class method a.menu to assign the properties only to the links in our menu. We then produce a depressed button effect by changing background colors and border styles in the hover property. (IE 5.0 Mozilla 5.0)

Place the Style Code in the head section of your document. Place HTML code between the body tags at the desired location.


STYLE CODE:
<style type="text/css">
div.menubar{
color :#000000;
background-color :#000000;
width :100%;
padding :5px }

a.menu{
width :100px;
text-align : center;
font-family: Verdana;
font-style : normal ;
font-size : 9pt;
font-weight :bold;
color :#000000;
text-decoration : none;
background-color :#F5D996;
padding :3px;
border-style : outset ;border-color :#F5D996 ;border-width : medium }

a.menu:hover{
color :#6F6F6F;
background-color :#8C1F13;
border-style :inset ;border-color :#F5D996 ;border-width :medium }
</style>

HTML:
<div class="menubar">
<a class="menu" href="index.html">Home</a>
<a class="menu" href="contact.html">Contact</a>
</div>

The code produces:

Home Contact

More Buttons

You can also create an illusion of a depressed button simply by changing the color of a solid border.



The HTML code:
<ul class="menu2">
<li class="menu2"><a href="#beginning" class="menu2">Home</a>
<li class="menu2"><a href="#beginning" class="menu2">About</a>
<li class="menu2"><a href="#beginning" class="menu2">Contact</a>
</ul>

The Style code:
<style type="text/css">
ul.menu2{list-style :none;text-align : center}
li.menu2{text-align : center }
a.menu2{
display : block;
width :125px;
text-align : center;
font-family: Verdana;
font-style : normal ;
font-size : 9pt;
font-weight :bold;
color :#000000;
text-decoration : none;
background-color :#F5D996;
padding :1px;
border-top : solid #ffffff 1px; border-right : solid #ffffff 1px; border-left : solid #000000 1px; border-bottom : solid #000000 1px }

a.menu2:hover{
color :#EFEFEF;
background-color :#CFCFCF;
border-top : solid #000000 1px; border-right : solid #000000 1px; border-left : solid #ffffff 1px; border-bottom : solid #ffffff 1px }
</style>

Lists pre tag


HTML TOC
Website Workshop
Main Website


Using HTML Code to Create a Website is provided by Net Success 2000 Plus Inc.
PO Box 1508
Somerset, KY 42502
Last Modified: September 3, 2007

HTML Codes Tutor Ebook