Thursday, April 23, 2009

CSS3 "Animated" Button Menubar - border-radius fun!

You will probably have to wait until 2020 before you will be able to see this simple CSS animation on Internet Explorer, but that doesn't mean you can't code goodies for users of standards compliant browsers:


This menu bar is pure CSS (CSS3 :P) and contains no images. If you are viewing this blog via IE, you are missing out on round corners. For those of you on Firefox and IE, I hope you are getting a kick out of the visual trick. The rounded corners are produced via the border-radius property.

Here comes the science!
<style>
/* menu bar */
#menubar{ /*menu container*/
 background-color:#e1e1e1; /*change or delete*/
 padding:0;
 margin:0;
}

.btnmenu ul{
 font: 15px verdana;
 padding: 0;
 margin: 0;
}

.btnmenu ul li{
 list-style: none;
 display: inline;
 padding:0;
 margin:0;
}

.btnmenu ul li a{
 padding: 2px 20px; /* 5px top & bottom, 20px L & R */
 text-decoration: none;
 float: left;
 background-color:#e1e1e1; /*graceful degradation for IE*/
 color: black;
 border: solid #e1e1e1;
 border-width: 4px 1px;
 /* radius = 1/2 * (font height + top&bottom padding) */
 -webkit-border-radius: 9px; /*firefox*/
 -moz-border-radius: 9px;  /*Safari*/
 border-radius: 9px; /*CSS3*/
}

.btnmenu ul li a:hover{
 padding:1px 20px 3px 20px; /* shift text 1px up */
 background-color: #FFFFFF; /*You Can Change This Color*/
 border-style: outset;
}

.btnmenu ul li a:active{
 padding:3px 20px 1px 20px; /* shift text 1px down */
 border-style: inset;
}

</style>
<div id='menubar'>
 <div class='btnmenu'>
  <ul>
   <li><a href='#'>Home</a></li>
   <li><a href='#'>Link #1</a></li>
   <li><a href='#'>Another Link</a></li>
  </ul> 
 </div>
 <div style='clear:both;'></div>
</div>

This code gracefully degrades on IE and shows square buttons.