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. 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> |
STYLE CODE:
<style type="text/css"> div.menubar{ color :#000000; background-color :#000000; width :50%; 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 } |
You can also create an illusion of a depressed button simply by changing the color of a solid border.
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> |
|