Nice CSS3 Button Menu

The article source:http://depotwebdesigner.com/tutorials/how-to-create-a-css3-menu-using-moz-border-radius.html

in this example we’ll explain how to create a menu with css that uses the propriety -moz-border-radius.
Demo work only on firefox.


Html:

CSS3 Radius Menu

CSS:

#menu {
float:left;
}
ul#firstmenu li {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:0.8em;
padding-top:40px;
}
ul#firstmenu a
{
padding:8px 8px 8px 8px;
text-decoration:none;
font-weight:bold;
color:#83129E;
}
ul#firstmenu a.current {
background-color:#DDDDDD;
}
ul#firstmenu a:hover, ul#firstmenu a.current {
-moz-border-radius:0 20px 20px 20px;
background-image:url("menu.jpg");
color:#FFFFFF;
}

ul#secondmenu li {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:0.8em;
padding-top:40px;
}
ul#secondmenu a
{
padding:8px 8px 8px 8px;
text-decoration:none;
font-weight:bold;
color:#b12ad4;
}
ul#secondmenu a.current {
background-color:#B0E137;
}
ul#secondmenu a:hover, ul#secondmenu a.current {
-moz-border-radius:0 20px 20px 20px;
background-image:url("menu2.jpg");
color:#b12ad4;
}

ul#thirdmenu li {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:0.8em;
padding-top:40px;
}
ul#thirdmenu a
{
padding:8px 8px 8px 8px;
text-decoration:none;
font-weight:bold;
color:#E227B6;
}
ul#thirdmenu a.current {
background-color:#B0E137;
}
ul#thirdmenu a:hover, ul#thirdmenu a.current {
-moz-border-radius:0 20px 20px 20px;
background-image:url("menu3.jpg");
color:white;
}

ul#fourthmenu li {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:0.8em;
padding-top:40px;
}
ul#fourthmenu a
{
padding:8px 8px 8px 8px;
text-decoration:none;
font-weight:bold;
color:black;
}
ul#fourthmenu a.current {
background-color:#B0E137;
}
ul#fourthmenu a:hover, ul#fourthmenu a.current {
-moz-border-radius:0 20px 20px 20px;
background-image:url("menu4.jpg");
color:black;
}

Download: http://www.htmldrive.net/items/download/869

Be Sociable, Share!

Leave a comment