Information
Another change of border style on hover to give the effect of a button press.
This is a quick and easy method of creating a button, but if you want something a bit more lifelike then see the ultimate button menu.
CASCADING STYLE SHEET
#menu a, #menu a:visited {
position:relative;
text-decoration:none;
text-align:center;
background-color:#9ab;
color:#fff;
display:block;
width:10em;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
padding:0.25em;
margin:0.5em auto;
}
#menu a:hover {
top:2px;
left:2px;
color:#fff;
border-color:#345 #cde #def #678;
}
XHTML
<div id="menu"> <a href="#nogo">Item 1</a> <a href="#nogo">Item 2</a> <a href="#nogo">Item 3</a> <a href="#nogo">Item 4</a> <a href="#nogo">Item 5</a> </div>
Copyright
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
Recommended Sites
- UK Game Server Hosting
- Complete travelguide to Phuket
- The Hotfix forum for windows
- Free layouts and more - Myspace
- Host Color
Web Hosting for 30 Websites - Software Downloads, Dhtml Scripts Dynamic Html, Software Downloads
- pay as you go e-commerce
Build your own SEO friendly webshop - Web design in Dorset
Bournmouth based web design agency - web hosting, dedicated servers
web reseller, managed servers







